@schenkerjon/ng-govbr-tw 0.0.1 → 0.0.2
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 +291 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,302 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @schenkerjon/ng-govbr-tw
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Componentes Angular baseados no [Gov.br Design System](https://www.gov.br/ds/), estilizados com [Tailwind CSS 3](https://tailwindcss.com/).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Biblioteca standalone, compativel com Angular 17, 18 e 19.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project ng-govbr-tw` or else it will be added to the default project in your `angular.json` file.
|
|
7
|
+
## Instalacao
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @schenkerjon/ng-govbr-tw
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
### Dependencias
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
A lib requer [Font Awesome 6](https://fontawesome.com/) e a fonte [Rawline](https://www.gov.br/ds/fundamentos-visuais/tipografia). Inclua no `index.html` ou importe o CSS base da lib:
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
```css
|
|
18
|
+
/* styles.css */
|
|
19
|
+
@import '@schenkerjon/ng-govbr-tw/src/lib/styles/govbr-tw.css';
|
|
20
|
+
```
|
|
17
21
|
|
|
18
|
-
|
|
22
|
+
### Tailwind Preset
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
A lib fornece um preset Tailwind com as cores, fontes e espacamentos do Gov.br DS. Adicione ao `tailwind.config.js`:
|
|
21
25
|
|
|
22
|
-
|
|
26
|
+
```js
|
|
27
|
+
module.exports = {
|
|
28
|
+
presets: [require('@schenkerjon/ng-govbr-tw/tailwind.preset')],
|
|
29
|
+
content: [
|
|
30
|
+
'./src/**/*.{html,ts}',
|
|
31
|
+
'./node_modules/@schenkerjon/ng-govbr-tw/**/*.mjs',
|
|
32
|
+
],
|
|
33
|
+
// ...
|
|
34
|
+
};
|
|
35
|
+
```
|
|
23
36
|
|
|
24
|
-
|
|
37
|
+
## Componentes
|
|
38
|
+
|
|
39
|
+
Todos os componentes sao **standalone** e podem ser importados diretamente no `imports` de qualquer componente ou modulo.
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { BrButtonComponent, BrInputComponent } from '@schenkerjon/ng-govbr-tw';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### br-button
|
|
46
|
+
|
|
47
|
+
Botao com variantes, tamanhos, loading e icones.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<br-button variant="primary" size="medium" icon="check" [loading]="saving">
|
|
51
|
+
Salvar
|
|
52
|
+
</br-button>
|
|
53
|
+
|
|
54
|
+
<br-button variant="danger" [circle]="true" icon="trash"></br-button>
|
|
55
|
+
|
|
56
|
+
<br-button variant="secondary" [block]="true" type="submit" [disabled]="form.invalid">
|
|
57
|
+
Enviar
|
|
58
|
+
</br-button>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
| Input | Tipo | Default |
|
|
62
|
+
|-----------|----------------------------------------|-------------|
|
|
63
|
+
| variant | `'primary' \| 'secondary' \| 'danger'` | `'primary'` |
|
|
64
|
+
| size | `'small' \| 'medium' \| 'large'` | `'medium'` |
|
|
65
|
+
| type | `'button' \| 'submit' \| 'reset'` | `'button'` |
|
|
66
|
+
| icon | `string` (nome Font Awesome sem `fa-`) | - |
|
|
67
|
+
| circle | `boolean` | `false` |
|
|
68
|
+
| block | `boolean` | `false` |
|
|
69
|
+
| loading | `boolean` | `false` |
|
|
70
|
+
| disabled | `boolean` | `false` |
|
|
71
|
+
|
|
72
|
+
| Output | Tipo |
|
|
73
|
+
|---------|--------------|
|
|
74
|
+
| onClick | `MouseEvent` |
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
### br-input
|
|
79
|
+
|
|
80
|
+
Campo de entrada com suporte a text, email, password, select e file. Implementa `ControlValueAccessor` para uso com Reactive Forms e ngModel.
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<br-input
|
|
84
|
+
label="Email"
|
|
85
|
+
type="email"
|
|
86
|
+
placeholder="Digite seu email"
|
|
87
|
+
[required]="true"
|
|
88
|
+
formControlName="email"
|
|
89
|
+
[error]="emailError"
|
|
90
|
+
></br-input>
|
|
91
|
+
|
|
92
|
+
<br-input label="Perfil" type="select" formControlName="role">
|
|
93
|
+
<option value="USER">Usuario</option>
|
|
94
|
+
<option value="ADMIN">Administrador</option>
|
|
95
|
+
</br-input>
|
|
96
|
+
|
|
97
|
+
<br-input label="Avatar" type="file" (fileSelected)="onFile($event)"></br-input>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
| Input | Tipo | Default |
|
|
101
|
+
|-------------|-------------------------------------------------------|----------|
|
|
102
|
+
| label | `string` | - |
|
|
103
|
+
| type | `'text' \| 'email' \| 'password' \| 'select' \| 'file'` | `'text'` |
|
|
104
|
+
| placeholder | `string` | `''` |
|
|
105
|
+
| required | `boolean` | `false` |
|
|
106
|
+
| error | `string` | - |
|
|
107
|
+
|
|
108
|
+
| Output | Tipo |
|
|
109
|
+
|--------------|--------|
|
|
110
|
+
| fileSelected | `File` |
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
### br-message
|
|
115
|
+
|
|
116
|
+
Mensagem de feedback com variantes e opcao de fechar.
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<br-message type="success">Operacao realizada com sucesso.</br-message>
|
|
120
|
+
|
|
121
|
+
<br-message type="danger" [dismissible]="true" (dismissed)="onClose()">
|
|
122
|
+
Erro ao processar requisicao.
|
|
123
|
+
</br-message>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
| Input | Tipo | Default |
|
|
127
|
+
|-------------|-------------------------------------------------|----------|
|
|
128
|
+
| type | `'success' \| 'danger' \| 'warning' \| 'info'` | `'info'` |
|
|
129
|
+
| dismissible | `boolean` | `false` |
|
|
130
|
+
|
|
131
|
+
| Output | Tipo |
|
|
132
|
+
|-----------|--------|
|
|
133
|
+
| dismissed | `void` |
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
### br-table
|
|
138
|
+
|
|
139
|
+
Tabela com paginacao integrada. O conteudo (thead/tbody) e projetado via `ng-content`.
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<br-table [page]="currentPage" [totalPages]="totalPages" (pageChange)="onPage($event)">
|
|
143
|
+
<thead>
|
|
144
|
+
<tr>
|
|
145
|
+
<th>Nome</th>
|
|
146
|
+
<th>Email</th>
|
|
147
|
+
</tr>
|
|
148
|
+
</thead>
|
|
149
|
+
<tbody>
|
|
150
|
+
<tr *ngFor="let user of users">
|
|
151
|
+
<td>{{ user.name }}</td>
|
|
152
|
+
<td>{{ user.email }}</td>
|
|
153
|
+
</tr>
|
|
154
|
+
</tbody>
|
|
155
|
+
</br-table>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
| Input | Tipo | Default |
|
|
159
|
+
|---------------|-------------------|----------|
|
|
160
|
+
| headerVariant | `'blue' \| 'light'` | `'blue'` |
|
|
161
|
+
| page | `number` | `1` |
|
|
162
|
+
| totalPages | `number` | `1` |
|
|
163
|
+
|
|
164
|
+
| Output | Tipo |
|
|
165
|
+
|------------|----------|
|
|
166
|
+
| pageChange | `number` |
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
### br-card
|
|
171
|
+
|
|
172
|
+
Card com icone opcional e link de navegacao.
|
|
173
|
+
|
|
174
|
+
```html
|
|
175
|
+
<br-card icon="users" linkText="Ver todos" linkRoute="/users">
|
|
176
|
+
<h3 class="text-lg font-semibold">150</h3>
|
|
177
|
+
<p class="text-sm text-govbr-gray-40">Usuarios cadastrados</p>
|
|
178
|
+
</br-card>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
| Input | Tipo | Default |
|
|
182
|
+
|-----------|-----------------------|---------|
|
|
183
|
+
| icon | `string` | - |
|
|
184
|
+
| linkText | `string` | - |
|
|
185
|
+
| linkRoute | `string \| any[]` | - |
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
### br-badge
|
|
190
|
+
|
|
191
|
+
Badge com variantes de cor.
|
|
192
|
+
|
|
193
|
+
```html
|
|
194
|
+
<br-badge variant="success">Ativo</br-badge>
|
|
195
|
+
<br-badge variant="danger">Inativo</br-badge>
|
|
196
|
+
<br-badge variant="neutral">Pendente</br-badge>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
| Input | Tipo | Default |
|
|
200
|
+
|---------|---------------------------------------------------------------|-------------|
|
|
201
|
+
| variant | `'primary' \| 'success' \| 'danger' \| 'warning' \| 'neutral'` | `'primary'` |
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
### br-header
|
|
206
|
+
|
|
207
|
+
Cabecalho do sistema com barra de acesso rapido, logo, titulo e area do usuario.
|
|
208
|
+
|
|
209
|
+
```html
|
|
210
|
+
<br-header
|
|
211
|
+
systemTitle="Meu Sistema"
|
|
212
|
+
systemSubtitle="Descricao do sistema"
|
|
213
|
+
logoSrc="assets/logo.png"
|
|
214
|
+
[userName]="user.name"
|
|
215
|
+
[userRole]="user.role"
|
|
216
|
+
(logout)="onLogout()"
|
|
217
|
+
></br-header>
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
| Input | Tipo | Default |
|
|
221
|
+
|----------------|----------|---------|
|
|
222
|
+
| systemTitle | `string` | `''` |
|
|
223
|
+
| systemSubtitle | `string` | - |
|
|
224
|
+
| logoSrc | `string` | `''` |
|
|
225
|
+
| userName | `string` | - |
|
|
226
|
+
| userRole | `string` | - |
|
|
227
|
+
|
|
228
|
+
| Output | Tipo |
|
|
229
|
+
|--------|--------|
|
|
230
|
+
| logout | `void` |
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
### br-footer
|
|
235
|
+
|
|
236
|
+
Rodape com logo e conteudo customizavel.
|
|
237
|
+
|
|
238
|
+
```html
|
|
239
|
+
<br-footer logoSrc="assets/logo.png">
|
|
240
|
+
<p>2024 - Todos os direitos reservados</p>
|
|
241
|
+
</br-footer>
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
| Input | Tipo | Default |
|
|
245
|
+
|---------|----------|---------|
|
|
246
|
+
| logoSrc | `string` | `''` |
|
|
247
|
+
|
|
248
|
+
---
|
|
249
|
+
|
|
250
|
+
### br-menu / br-menu-item
|
|
251
|
+
|
|
252
|
+
Menu lateral com itens de navegacao.
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<br-menu>
|
|
256
|
+
<br-menu-item route="/dashboard" label="Dashboard" icon="chart-line"></br-menu-item>
|
|
257
|
+
<br-menu-item route="/users" label="Usuarios" icon="users"></br-menu-item>
|
|
258
|
+
</br-menu>
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
**br-menu-item:**
|
|
262
|
+
|
|
263
|
+
| Input | Tipo | Default |
|
|
264
|
+
|-------|-------------------|---------|
|
|
265
|
+
| route | `string \| any[]` | `'/'` |
|
|
266
|
+
| label | `string` | `''` |
|
|
267
|
+
| icon | `string` | - |
|
|
268
|
+
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
### br-layout
|
|
272
|
+
|
|
273
|
+
Layout estrutural que organiza header, menu, conteudo e footer.
|
|
274
|
+
|
|
275
|
+
```html
|
|
276
|
+
<br-layout>
|
|
277
|
+
<br-header ...></br-header>
|
|
278
|
+
<br-menu>...</br-menu>
|
|
279
|
+
<div>Conteudo principal</div>
|
|
280
|
+
<br-footer ...></br-footer>
|
|
281
|
+
</br-layout>
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
## Tokens de cor
|
|
285
|
+
|
|
286
|
+
A paleta segue a especificacao oficial do Gov.br Design System:
|
|
287
|
+
|
|
288
|
+
| Token | Cor |
|
|
289
|
+
|--------------------------|-----------|
|
|
290
|
+
| `govbr-primary` | `#1351b4` |
|
|
291
|
+
| `govbr-primary-dark` | `#0c326f` |
|
|
292
|
+
| `govbr-primary-darkest` | `#071d41` |
|
|
293
|
+
| `govbr-primary-light` | `#c5d4eb` |
|
|
294
|
+
| `govbr-primary-lightest` | `#dbe8fb` |
|
|
295
|
+
| `govbr-success` | `#168821` |
|
|
296
|
+
| `govbr-danger` | `#e52207` |
|
|
297
|
+
| `govbr-warning` | `#ffcd07` |
|
|
298
|
+
| `govbr-info` | `#155bcb` |
|
|
299
|
+
|
|
300
|
+
## Licenca
|
|
301
|
+
|
|
302
|
+
MIT
|