flicker-alerts 1.0.0
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 +190 -0
- package/index.js +60 -0
- package/package.json +22 -0
- package/style.css +148 -0
package/index.html
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
9
|
+
<link rel="stylesheet" href="style.css">
|
|
10
|
+
<style>
|
|
11
|
+
/* Estilo para os botões */
|
|
12
|
+
.btn {
|
|
13
|
+
font-size: 14px;
|
|
14
|
+
padding: 8px 16px;
|
|
15
|
+
border-radius: 8px;
|
|
16
|
+
width: 100%; /* Botões ocupam 100% do espaço das colunas */
|
|
17
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.btn:hover {
|
|
21
|
+
transform: scale(1.05);
|
|
22
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Botões específicos */
|
|
26
|
+
.btn-success {
|
|
27
|
+
background-color: #28a745;
|
|
28
|
+
color: white;
|
|
29
|
+
}
|
|
30
|
+
.btn-info {
|
|
31
|
+
background-color: #17a2b8;
|
|
32
|
+
color: white;
|
|
33
|
+
}
|
|
34
|
+
.btn-warning {
|
|
35
|
+
background-color: #ffc107;
|
|
36
|
+
color: black;
|
|
37
|
+
}
|
|
38
|
+
.btn-danger {
|
|
39
|
+
background-color: #dc3545;
|
|
40
|
+
color: white;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.container {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: 20px;
|
|
48
|
+
margin-top: 30px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Área da documentação */
|
|
52
|
+
.doc-section {
|
|
53
|
+
margin-top: 30px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
max-width: 800px;
|
|
56
|
+
}
|
|
57
|
+
.doc-section h3 {
|
|
58
|
+
margin-bottom: 10px;
|
|
59
|
+
font-size: 22px;
|
|
60
|
+
text-align: center;
|
|
61
|
+
}
|
|
62
|
+
.doc-section p {
|
|
63
|
+
font-size: 16px;
|
|
64
|
+
line-height: 1.5;
|
|
65
|
+
}
|
|
66
|
+
.doc-section pre {
|
|
67
|
+
background-color: #1e1e1e; /* Fundo escuro estilo VSCode */
|
|
68
|
+
color: #dcdcdc; /* Texto claro */
|
|
69
|
+
padding: 10px;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
border: 1px solid #333; /* Bordas discretas */
|
|
74
|
+
font-family: 'Courier New', Courier, monospace; /* Fonte monoespaçada */
|
|
75
|
+
}
|
|
76
|
+
.doc-section ul {
|
|
77
|
+
padding-left: 20px;
|
|
78
|
+
}
|
|
79
|
+
.doc-section li {
|
|
80
|
+
margin-bottom: 10px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Ajustes para os botões */
|
|
84
|
+
.row {
|
|
85
|
+
display: flex;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
gap: 10px;
|
|
88
|
+
}
|
|
89
|
+
.col {
|
|
90
|
+
flex: 1 1 100%;
|
|
91
|
+
max-width: 200px; /* Limita o tamanho dos botões */
|
|
92
|
+
}
|
|
93
|
+
</style>
|
|
94
|
+
</head>
|
|
95
|
+
<body>
|
|
96
|
+
<div class="container">
|
|
97
|
+
<h1>FlickerAlerts</h1>
|
|
98
|
+
|
|
99
|
+
<!-- Linha com botões -->
|
|
100
|
+
<div class="row">
|
|
101
|
+
<div class="col">
|
|
102
|
+
<button class="btn btn-success" id="success-btn">Mostrar Sucesso</button>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="col">
|
|
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>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<!-- Área para exibir alertas no canto superior direito -->
|
|
116
|
+
<div id="alerts-container" class="top-right"></div>
|
|
117
|
+
|
|
118
|
+
<!-- Documentação -->
|
|
119
|
+
<div class="doc-section">
|
|
120
|
+
<h3>Documentação de Uso</h3>
|
|
121
|
+
<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>
|
|
122
|
+
|
|
123
|
+
<h4>Instalação</h4>
|
|
124
|
+
<p>Instale via <code>npm</code>:</p>
|
|
125
|
+
<pre><code>npm install flicker-alerts</code></pre>
|
|
126
|
+
|
|
127
|
+
<h4>Uso</h4>
|
|
128
|
+
<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>
|
|
129
|
+
|
|
130
|
+
<h4>Uso no Angular</h4>
|
|
131
|
+
<p>Com o <code>FlickerAlerts</code> instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:</p>
|
|
132
|
+
<pre><code>import FlickerAlerts from 'flicker-alerts';
|
|
133
|
+
|
|
134
|
+
export class AppComponent {
|
|
135
|
+
showSuccessAlert() {
|
|
136
|
+
FlickerAlerts.showAlert({
|
|
137
|
+
type: 'success',
|
|
138
|
+
title: 'Sucesso',
|
|
139
|
+
message: 'Operação concluída com sucesso!'
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
showInfoAlert() {
|
|
144
|
+
FlickerAlerts.showAlert({
|
|
145
|
+
type: 'info',
|
|
146
|
+
title: 'Informação',
|
|
147
|
+
message: 'Aqui está uma informação importante.'
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
showWarningAlert() {
|
|
152
|
+
FlickerAlerts.showAlert({
|
|
153
|
+
type: 'warning',
|
|
154
|
+
title: 'Alerta',
|
|
155
|
+
message: 'Por favor, preste atenção nisso!'
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
showErrorAlert() {
|
|
160
|
+
FlickerAlerts.showAlert({
|
|
161
|
+
type: 'danger',
|
|
162
|
+
title: 'Erro',
|
|
163
|
+
message: 'Ocorreu um erro inesperado!'
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
}</code></pre>
|
|
167
|
+
|
|
168
|
+
<h4>Uso no React</h4>
|
|
169
|
+
<p>Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu componente React assim:</p>
|
|
170
|
+
<pre><code>import FlickerAlerts from 'flicker-alerts';
|
|
171
|
+
|
|
172
|
+
function App() {
|
|
173
|
+
const showSuccessAlert = () => {
|
|
174
|
+
FlickerAlerts.showAlert({
|
|
175
|
+
type: 'success',
|
|
176
|
+
title: 'Sucesso',
|
|
177
|
+
message: 'Operação concluída com sucesso!'
|
|
178
|
+
});
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
}</code></pre>
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<script src="index.js"></script>
|
|
189
|
+
</body>
|
|
190
|
+
</html>
|
package/index.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const FlickerAlerts = {
|
|
2
|
+
showAlert: function ({ type, title, message, timer = 3000 }) {
|
|
3
|
+
// Criação do alerta
|
|
4
|
+
const alertBox = document.createElement('div');
|
|
5
|
+
alertBox.className = `alert-custom alert-${type}`;
|
|
6
|
+
|
|
7
|
+
// Ícone
|
|
8
|
+
const icon = document.createElement('div');
|
|
9
|
+
icon.className = 'icon';
|
|
10
|
+
const iconClass = {
|
|
11
|
+
success: 'fa-check',
|
|
12
|
+
info: 'fa-info',
|
|
13
|
+
warning: 'fa-exclamation',
|
|
14
|
+
danger: 'fa-times'
|
|
15
|
+
}[type];
|
|
16
|
+
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
|
17
|
+
alertBox.appendChild(icon);
|
|
18
|
+
|
|
19
|
+
// Conteúdo
|
|
20
|
+
const content = document.createElement('div');
|
|
21
|
+
content.innerHTML = `<strong>${title}</strong><div>${message}</div>`;
|
|
22
|
+
alertBox.appendChild(content);
|
|
23
|
+
|
|
24
|
+
// Botão de fechamento
|
|
25
|
+
const closeButton = document.createElement('div');
|
|
26
|
+
closeButton.className = 'close';
|
|
27
|
+
closeButton.innerHTML = '<i class="fas fa-times"></i>';
|
|
28
|
+
closeButton.onclick = () => alertBox.remove();
|
|
29
|
+
alertBox.appendChild(closeButton);
|
|
30
|
+
|
|
31
|
+
// Barra de progresso
|
|
32
|
+
const progressBar = document.createElement('div');
|
|
33
|
+
progressBar.className = `progress-bar progress-bar-${type}`;
|
|
34
|
+
alertBox.appendChild(progressBar);
|
|
35
|
+
|
|
36
|
+
// Adicionar ao container
|
|
37
|
+
const container = document.getElementById('alerts-container');
|
|
38
|
+
container.appendChild(alertBox);
|
|
39
|
+
|
|
40
|
+
// Remoção automática
|
|
41
|
+
setTimeout(() => alertBox.remove(), timer);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// Botões de teste
|
|
46
|
+
document.getElementById('success-btn').addEventListener('click', () => {
|
|
47
|
+
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
document.getElementById('info-btn').addEventListener('click', () => {
|
|
51
|
+
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
document.getElementById('warning-btn').addEventListener('click', () => {
|
|
55
|
+
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
document.getElementById('error-btn').addEventListener('click', () => {
|
|
59
|
+
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
|
|
60
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "flicker-alerts",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Biblioteca para criar alertas animados de sucesso, erro, aviso e informações.",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"alertas",
|
|
11
|
+
"flicker",
|
|
12
|
+
"javascript",
|
|
13
|
+
"UI"
|
|
14
|
+
],
|
|
15
|
+
"author": "Seu Nome",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"dependencies": {},
|
|
18
|
+
"devDependencies": {},
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"access": "public"
|
|
21
|
+
}
|
|
22
|
+
}
|
package/style.css
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
.alert-custom {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
padding: 1rem;
|
|
5
|
+
border-radius: 0.5rem;
|
|
6
|
+
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
7
|
+
margin-bottom: 1rem;
|
|
8
|
+
width: 100%;
|
|
9
|
+
max-width: 320px;
|
|
10
|
+
position: relative;
|
|
11
|
+
background-color: white;
|
|
12
|
+
color: #000;
|
|
13
|
+
z-index: 1050;
|
|
14
|
+
font-family: Arial, sans-serif;
|
|
15
|
+
font-size: 0.9rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.alert-custom .icon {
|
|
19
|
+
text-align: center;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
width: 2rem; /* Ajuste o tamanho do ícone */
|
|
24
|
+
height: 2rem;
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
font-size: 1.2rem; /* Ajusta o tamanho do ícone */
|
|
27
|
+
line-height: 0;
|
|
28
|
+
min-width: 2rem;
|
|
29
|
+
min-height: 2rem;
|
|
30
|
+
margin-right: 1rem; /* Espaço entre o ícone e o conteúdo */
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.alert-custom .icon i {
|
|
34
|
+
font-size: inherit; /* Ajusta o ícone ao tamanho da div */
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.alert-custom .content {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column; /* Conteúdo empilhado */
|
|
40
|
+
justify-content: center; /* Centraliza verticalmente o título e a mensagem */
|
|
41
|
+
flex-grow: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.alert-custom .content strong {
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
font-size: 1rem;
|
|
47
|
+
margin-bottom: 0.25rem; /* Espaçamento entre título e mensagem */
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.alert-custom .content div {
|
|
51
|
+
font-size: 0.9rem;
|
|
52
|
+
color: #555;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Botão de Fechar no topo */
|
|
56
|
+
.alert-custom .close {
|
|
57
|
+
position: absolute; /* Posiciona o X no topo da caixa */
|
|
58
|
+
top: 5px; /* Ajusta a distância do topo */
|
|
59
|
+
right: 5px; /* Ajusta a distância da borda direita */
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
color: #999; /* Cor mais clara para o X */
|
|
62
|
+
font-size: 1rem; /* Tamanho menor do X */
|
|
63
|
+
padding: 0.25rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.alert-custom .close:hover {
|
|
67
|
+
color: #777; /* Cor mais escura no hover */
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.alert-success {
|
|
71
|
+
border-left: 0.25rem solid #28a745;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.alert-success .icon {
|
|
75
|
+
background-color: #28a745;
|
|
76
|
+
color: white;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.alert-info {
|
|
80
|
+
border-left: 0.25rem solid #17a2b8;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.alert-info .icon {
|
|
84
|
+
background-color: #17a2b8;
|
|
85
|
+
color: white;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.alert-warning {
|
|
89
|
+
border-left: 0.25rem solid #ffc107;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.alert-warning .icon {
|
|
93
|
+
background-color: #ffc107;
|
|
94
|
+
color: white;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.alert-danger {
|
|
98
|
+
border-left: 0.25rem solid #dc3545;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.alert-danger .icon {
|
|
102
|
+
background-color: #dc3545;
|
|
103
|
+
color: white;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.top-right {
|
|
107
|
+
position: fixed;
|
|
108
|
+
top: 1rem;
|
|
109
|
+
right: 1rem;
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
gap: 0.5rem;
|
|
113
|
+
z-index: 1050;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.progress-bar {
|
|
117
|
+
position: absolute;
|
|
118
|
+
bottom: 0;
|
|
119
|
+
left: 0;
|
|
120
|
+
height: 0.25rem;
|
|
121
|
+
animation: load 3s linear forwards;
|
|
122
|
+
border-radius: 0 0 0.5rem 0.5rem;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.progress-bar-success {
|
|
126
|
+
background-color: #28a745;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.progress-bar-info {
|
|
130
|
+
background-color: #17a2b8;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.progress-bar-warning {
|
|
134
|
+
background-color: #ffc107;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.progress-bar-danger {
|
|
138
|
+
background-color: #dc3545;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@keyframes load {
|
|
142
|
+
from {
|
|
143
|
+
width: 0;
|
|
144
|
+
}
|
|
145
|
+
to {
|
|
146
|
+
width: 100%;
|
|
147
|
+
}
|
|
148
|
+
}
|