flicker-alerts 1.0.66 → 1.0.68
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/package.json +5 -5
- package/readme.md +114 -94
- package/style.css +0 -1
- package/.vscode/settings.json +0 -3
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flicker-alerts",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.68",
|
|
4
|
+
"linkedin": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
|
|
5
|
+
"demonstração": "https://flickeralerts.netlify.app/",
|
|
6
6
|
"description": "Biblioteca para alertas animados",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"types": "index.d.ts",
|
|
@@ -18,6 +18,6 @@
|
|
|
18
18
|
"author": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"flicker-alerts": "^1.0.
|
|
21
|
+
"flicker-alerts": "^1.0.68"
|
|
22
22
|
}
|
|
23
|
-
}
|
|
23
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,148 +1,168 @@
|
|
|
1
1
|
|
|
2
2
|
# FlickerAlerts
|
|
3
3
|
|
|
4
|
-
**FlickerAlerts** é uma biblioteca
|
|
4
|
+
**FlickerAlerts** é uma biblioteca leve e poderosa para criar alertas e modais animados com suporte a diferentes tipos de mensagens: sucesso, erro, aviso e informações. Fácil de integrar em projetos Angular, React ou em qualquer aplicação JavaScript moderna.
|
|
5
5
|
|
|
6
|
-
## Instalação
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
🌍 Links Importantes:
|
|
8
|
+
Esses links são essenciais para o funcionamento adequado dos estilos e ícones:
|
|
9
|
+
|
|
10
|
+
<!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- Estilo do FlickerAlerts --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flicker-alerts/style.css">
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## 📦 Instalação
|
|
15
|
+
|
|
16
|
+
Instale a biblioteca usando o npm:
|
|
9
17
|
|
|
10
18
|
```bash
|
|
11
19
|
npm install flicker-alerts
|
|
12
20
|
```
|
|
13
21
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
**FlickerAlerts** é 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.
|
|
22
|
+
Se você não deseja usar o CDN para os estilos, também é possível importar o arquivo CSS diretamente do pacote instalado. Veja como configurar no Angular e no React.
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
<p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome .</p>
|
|
20
|
-
<p class="text-import"> <!-- Importação do Bootstrap -->
|
|
21
|
-
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" <!-- Importação do Font Awesome -->
|
|
22
|
-
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
23
|
-
"https://cdn.jsdelivr.net/npm/flicker-alerts/style.css"
|
|
24
|
-
</p>
|
|
24
|
+
---
|
|
25
25
|
|
|
26
|
+
## 🚀 Uso
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
Após a instalação, importe a biblioteca no seu projeto e utilize a função `showAlert` ou `showModal` para criar alertas e modais.
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
### Exemplo Básico de Alerta:
|
|
30
31
|
|
|
31
|
-
```
|
|
32
|
-
|
|
32
|
+
```javascript
|
|
33
|
+
import FlickerAlerts from 'flicker-alerts';
|
|
34
|
+
|
|
35
|
+
FlickerAlerts.showAlert({
|
|
36
|
+
type: 'success', // 'success', 'info', 'warning', 'danger'
|
|
37
|
+
title: 'Sucesso!',
|
|
38
|
+
message: 'Operação realizada com sucesso.',
|
|
39
|
+
position: 'top-right' // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
|
|
40
|
+
});
|
|
33
41
|
```
|
|
34
42
|
|
|
35
|
-
|
|
43
|
+
---
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
## 🔧 Integração por Framework
|
|
38
46
|
|
|
39
|
-
###
|
|
47
|
+
### Angular
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
1. **Importe e use:**
|
|
42
50
|
|
|
43
51
|
```typescript
|
|
44
52
|
import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
|
|
45
53
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
export class AppComponent {
|
|
55
|
+
showAlert() {
|
|
56
|
+
FlickerAlerts.showAlert({
|
|
57
|
+
type: 'warning',
|
|
58
|
+
title: 'Atenção!',
|
|
59
|
+
message: 'Algo deu errado.',
|
|
60
|
+
position: 'top-center'
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
showModal() {
|
|
65
|
+
FlickerModals.showModal({
|
|
66
|
+
type: 'warning',
|
|
67
|
+
title: 'Confirmação',
|
|
68
|
+
message: 'Deseja realmente continuar?',
|
|
69
|
+
onConfirm: () => console.log('Confirmado!'),
|
|
70
|
+
onCancel: () => console.log('Cancelado!')
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
60
74
|
```
|
|
61
|
-
# Caso o Estilo Não Esteja Sendo Aplicado no Angular
|
|
62
|
-
Se o estilo da biblioteca não estiver sendo aplicado corretamente, verifique se você adicionou o caminho para o arquivo CSS no angular.json.
|
|
63
75
|
|
|
64
|
-
|
|
76
|
+
2. **Adicione os estilos ao `angular.json`:**
|
|
77
|
+
|
|
78
|
+
Se você prefere não usar o CDN, pode configurar o Angular para importar o arquivo CSS diretamente do pacote instalado:
|
|
65
79
|
|
|
80
|
+
```json
|
|
66
81
|
"styles": [
|
|
67
|
-
|
|
82
|
+
"node_modules/flicker-alerts/style.css"
|
|
68
83
|
]
|
|
84
|
+
```
|
|
69
85
|
|
|
86
|
+
Isso garante que o estilo seja incluído no build da aplicação. Caso prefira o CDN, basta adicioná-lo ao arquivo `index.html`.
|
|
70
87
|
|
|
71
88
|
---
|
|
72
89
|
|
|
73
|
-
###
|
|
90
|
+
### React
|
|
74
91
|
|
|
75
|
-
|
|
92
|
+
1. **Importe e use:**
|
|
76
93
|
|
|
77
94
|
```javascript
|
|
78
95
|
import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
|
|
96
|
+
import 'flicker-alerts/style.css'; // Importa o CSS diretamente do pacote
|
|
97
|
+
|
|
98
|
+
const App = () => {
|
|
99
|
+
const showAlert = () => {
|
|
100
|
+
FlickerAlerts.showAlert({
|
|
101
|
+
type: 'info',
|
|
102
|
+
title: 'Informação',
|
|
103
|
+
message: 'Este é um alerta informativo.',
|
|
104
|
+
position: 'bottom-left'
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
const showModal = () => {
|
|
109
|
+
FlickerModals.showModal({
|
|
110
|
+
type: 'delete',
|
|
111
|
+
title: 'Confirmação de Exclusão',
|
|
112
|
+
message: 'Deseja realmente excluir este item?',
|
|
113
|
+
onConfirm: () => console.log('Item deletado!'),
|
|
114
|
+
onCancel: () => console.log('Ação cancelada.')
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
return (
|
|
119
|
+
<>
|
|
120
|
+
<button onClick={showAlert}>Mostrar Alerta</button>
|
|
121
|
+
<button onClick={showModal}>Mostrar Modal</button>
|
|
122
|
+
</>
|
|
123
|
+
);
|
|
124
|
+
};
|
|
125
|
+
```
|
|
79
126
|
|
|
127
|
+
2. **Adicione os estilos manualmente no React:**
|
|
80
128
|
|
|
129
|
+
Se você prefere não usar o CDN para o CSS, pode importar o arquivo diretamente do pacote no arquivo principal do React, como `index.js` ou `App.js`:
|
|
81
130
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
|
|
85
|
-
title: 'Título',
|
|
86
|
-
message: 'Mensagem personalizada',
|
|
87
|
-
position: 'top-right'
|
|
88
|
-
// Opções: 'top-right', 'top-left',
|
|
89
|
-
//'bottom-right', 'bottom-left', 'center',
|
|
90
|
-
//'top-center', 'bottom-center'
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
|
|
131
|
+
```javascript
|
|
132
|
+
import 'flicker-alerts/style.css';
|
|
94
133
|
```
|
|
95
134
|
|
|
135
|
+
Essa abordagem é recomendada para garantir que o estilo seja incluído no build final da aplicação.
|
|
96
136
|
|
|
137
|
+
---
|
|
97
138
|
|
|
98
|
-
|
|
99
|
-
### Uso no Angular
|
|
139
|
+
## 📖 API
|
|
100
140
|
|
|
101
|
-
|
|
141
|
+
### `FlickerAlerts.showAlert(config)`
|
|
102
142
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
type: 'warning', // Tipos: 'warning', 'delete'
|
|
110
|
-
title: 'Título do Modal',
|
|
111
|
-
message: 'Mensagem personalizada para o modal.',
|
|
112
|
-
onConfirm: () => { console.log('Confirmado!'); },
|
|
113
|
-
onCancel: () => { console.log('Cancelado!'); }
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
143
|
+
| Propriedade | Tipo | Descrição |
|
|
144
|
+
|-------------|------------|------------------------------------------------|
|
|
145
|
+
| `type` | `string` | Tipo do alerta: `success`, `info`, `warning`, `danger`. |
|
|
146
|
+
| `title` | `string` | Título do alerta. |
|
|
147
|
+
| `message` | `string` | Mensagem do alerta. |
|
|
148
|
+
| `position` | `string` | Posição: `top-right`, `top-left`, `bottom-right`, etc. |
|
|
118
149
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
### Uso no React
|
|
122
|
-
|
|
123
|
-
Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
|
|
150
|
+
---
|
|
124
151
|
|
|
125
|
-
|
|
126
|
-
import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
|
|
127
|
-
|
|
128
|
-
const showModal = () => {
|
|
129
|
-
FlickerModals.showModal({
|
|
130
|
-
type: 'delete', // Tipos: 'warning', 'delete'
|
|
131
|
-
title: 'Título do Modal',
|
|
132
|
-
message: 'Mensagem personalizada para o modal.',
|
|
133
|
-
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
|
134
|
-
onCancel: () => { console.log('Cancelado!'); }
|
|
135
|
-
});
|
|
136
|
-
};
|
|
137
|
-
|
|
152
|
+
### `FlickerModals.showModal(config)`
|
|
138
153
|
|
|
139
|
-
|
|
154
|
+
| Propriedade | Tipo | Descrição |
|
|
155
|
+
|---------------|------------|---------------------------------------------------|
|
|
156
|
+
| `type` | `string` | Tipo do modal: `warning`, `delete`. |
|
|
157
|
+
| `title` | `string` | Título do modal. |
|
|
158
|
+
| `message` | `string` | Mensagem exibida no modal. |
|
|
159
|
+
| `onConfirm` | `function` | Callback para execução quando confirmado. |
|
|
160
|
+
| `onCancel` | `function` | Callback para execução quando cancelado. |
|
|
140
161
|
|
|
141
162
|
---
|
|
142
163
|
|
|
143
|
-
|
|
144
|
-
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.
|
|
164
|
+
## 💬 Suporte
|
|
145
165
|
|
|
146
|
-
|
|
166
|
+
Caso tenha dúvidas ou precise de ajuda, entre em contato com o desenvolvedor no [LinkedIn](https://www.linkedin.com/in/bruno-carneiro-9a51aa190/).
|
|
147
167
|
|
|
148
|
-
|
|
168
|
+
---
|
package/style.css
CHANGED
package/.vscode/settings.json
DELETED