forlogic-core 2.2.6 → 2.2.7
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/.note/memory/features/import/attachment-idempotency-registry.md +8 -8
- package/.note/memory/features/import/attachment-strategy.md +30 -30
- package/.note/memory/patterns/admin-i18n-policy.md +20 -20
- package/.note/memory/patterns/alias-url-resolution.md +69 -69
- package/.note/memory/patterns/doc-sync-rule.md +35 -35
- package/.note/memory/patterns/documentation-standard.md +17 -17
- package/.note/memory/patterns/dynamic-supabase-config.md +4 -4
- package/.note/memory/patterns/environment-detection-logic.md +35 -35
- package/.note/memory/patterns/i18n-architecture.md +3 -3
- package/README.md +120 -120
- package/dist/README.md +1079 -0
- package/dist/bin/bootstrap.js +40 -0
- package/dist/bin/pull-docs.js +186 -0
- package/dist/components/ui/color-picker.d.ts +2 -0
- package/dist/components/ui/combo-tree.d.ts +3 -1
- package/dist/components/ui/combobox.d.ts +2 -1
- package/dist/components/ui/select.d.ts +9 -2
- package/dist/docs/KNOWLEDGE.md +109 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/docs/PUBLISH.md +168 -168
- package/docs/STORAGE_BUCKETS.md +456 -456
- package/docs/SUPABASE_SECRETS.md +122 -122
- package/docs/WORKSPACE_KNOWLEDGE.md +154 -154
- package/docs/design-system/buttons-actions.md +130 -130
- package/docs/design-system/charts-dashboards.md +301 -340
- package/docs/design-system/crud.md +114 -174
- package/docs/design-system/data-display.md +106 -106
- package/docs/design-system/dialogs.md +212 -212
- package/docs/design-system/domain.md +329 -319
- package/docs/design-system/examples.md +275 -275
- package/docs/design-system/foundation.md +1 -1
- package/docs/design-system/inputs.md +137 -132
- package/docs/design-system/layout.md +154 -202
- package/docs/design-system/navigation.md +331 -272
- package/docs/design-system/notifications-feedback.md +34 -34
- package/docs/design-system/patterns/README.md +53 -53
- package/docs/design-system/patterns/action-button.md +22 -22
- package/docs/design-system/patterns/alertdialog-deletion.md +46 -46
- package/docs/design-system/patterns/baseform-custom-fields.md +59 -59
- package/docs/design-system/patterns/baseform-usage.md +42 -42
- package/docs/design-system/patterns/body-content-scroll.md +56 -56
- package/docs/design-system/patterns/combo-tree.md +23 -23
- package/docs/design-system/patterns/components-registry.md +17 -17
- package/docs/design-system/patterns/core-providers.md +41 -41
- package/docs/design-system/patterns/crud-bulk-actions.md +12 -12
- package/docs/design-system/patterns/crud-config-props.md +16 -16
- package/docs/design-system/patterns/crud-defaults.md +17 -17
- package/docs/design-system/patterns/crud-toolbar.md +28 -28
- package/docs/design-system/patterns/delete-confirmation.md +40 -40
- package/docs/design-system/patterns/dialog-body-scroll.md +26 -26
- package/docs/design-system/patterns/dialog-structure.md +32 -32
- package/docs/design-system/patterns/dialog-variants.md +41 -41
- package/docs/design-system/patterns/feature-flags.md +81 -81
- package/docs/design-system/patterns/header-metadata.md +57 -57
- package/docs/design-system/patterns/i18n-setup.md +117 -117
- package/docs/design-system/patterns/pagination.md +27 -27
- package/docs/design-system/patterns/single-scroll.md +39 -39
- package/docs/design-system/patterns/vite-tailwind-setup.md +49 -49
- package/docs/design-system/platform.md +18 -18
- package/docs/design-system/selectors.md +287 -258
- package/docs/design-system/tables-grids.md +38 -95
- package/package.json +152 -152
- package/dist/assets/docs-BEwTKYu3.css +0 -1
- package/dist/assets/docs-Bgpz6ETN.js +0 -10752
- package/dist/assets/index-SqMwTzMJ.js +0 -97
- package/dist/index.html +0 -34
|
@@ -11,38 +11,38 @@ Exibe o caminho até o recurso atual usando uma hierarquia de links.
|
|
|
11
11
|
|
|
12
12
|
**Uso:**
|
|
13
13
|
```tsx
|
|
14
|
-
import { Link } from "react-router-dom"
|
|
15
|
-
import {
|
|
16
|
-
Breadcrumb,
|
|
17
|
-
BreadcrumbItem,
|
|
18
|
-
BreadcrumbLink,
|
|
19
|
-
BreadcrumbList,
|
|
20
|
-
BreadcrumbPage,
|
|
21
|
-
BreadcrumbSeparator,
|
|
22
|
-
} from "forlogic-core"
|
|
23
|
-
|
|
24
|
-
// ✅ CORRETO: Usar asChild + Link para navegação SPA
|
|
25
|
-
<Breadcrumb>
|
|
26
|
-
<BreadcrumbList>
|
|
27
|
-
<BreadcrumbItem>
|
|
28
|
-
<BreadcrumbLink asChild>
|
|
29
|
-
<Link to="/">Home</Link>
|
|
30
|
-
</BreadcrumbLink>
|
|
31
|
-
</BreadcrumbItem>
|
|
32
|
-
<BreadcrumbSeparator />
|
|
33
|
-
<BreadcrumbItem>
|
|
34
|
-
<BreadcrumbLink asChild>
|
|
35
|
-
<Link to="/componentes">Componentes</Link>
|
|
36
|
-
</BreadcrumbLink>
|
|
37
|
-
</BreadcrumbItem>
|
|
38
|
-
<BreadcrumbSeparator />
|
|
39
|
-
<BreadcrumbItem>
|
|
40
|
-
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
|
41
|
-
</BreadcrumbItem>
|
|
42
|
-
</BreadcrumbList>
|
|
43
|
-
</Breadcrumb>
|
|
44
|
-
|
|
45
|
-
// ❌ ERRADO: Usar href diretamente (causa reload da página)
|
|
14
|
+
import { Link } from "react-router-dom"
|
|
15
|
+
import {
|
|
16
|
+
Breadcrumb,
|
|
17
|
+
BreadcrumbItem,
|
|
18
|
+
BreadcrumbLink,
|
|
19
|
+
BreadcrumbList,
|
|
20
|
+
BreadcrumbPage,
|
|
21
|
+
BreadcrumbSeparator,
|
|
22
|
+
} from "forlogic-core"
|
|
23
|
+
|
|
24
|
+
// ✅ CORRETO: Usar asChild + Link para navegação SPA
|
|
25
|
+
<Breadcrumb>
|
|
26
|
+
<BreadcrumbList>
|
|
27
|
+
<BreadcrumbItem>
|
|
28
|
+
<BreadcrumbLink asChild>
|
|
29
|
+
<Link to="/">Home</Link>
|
|
30
|
+
</BreadcrumbLink>
|
|
31
|
+
</BreadcrumbItem>
|
|
32
|
+
<BreadcrumbSeparator />
|
|
33
|
+
<BreadcrumbItem>
|
|
34
|
+
<BreadcrumbLink asChild>
|
|
35
|
+
<Link to="/componentes">Componentes</Link>
|
|
36
|
+
</BreadcrumbLink>
|
|
37
|
+
</BreadcrumbItem>
|
|
38
|
+
<BreadcrumbSeparator />
|
|
39
|
+
<BreadcrumbItem>
|
|
40
|
+
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
|
41
|
+
</BreadcrumbItem>
|
|
42
|
+
</BreadcrumbList>
|
|
43
|
+
</Breadcrumb>
|
|
44
|
+
|
|
45
|
+
// ❌ ERRADO: Usar href diretamente (causa reload da página)
|
|
46
46
|
<BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
|
|
47
47
|
```
|
|
48
48
|
|
|
@@ -63,10 +63,10 @@ import {
|
|
|
63
63
|
import { Link } from
|
|
64
64
|
```
|
|
65
65
|
```tsx
|
|
66
|
-
<Breadcrumb>
|
|
67
|
-
<BreadcrumbList>
|
|
68
|
-
<BreadcrumbItem>
|
|
69
|
-
<BreadcrumbLink asChild>
|
|
66
|
+
<Breadcrumb>
|
|
67
|
+
<BreadcrumbList>
|
|
68
|
+
<BreadcrumbItem>
|
|
69
|
+
<BreadcrumbLink asChild>
|
|
70
70
|
<Link to=
|
|
71
71
|
```
|
|
72
72
|
|
|
@@ -91,7 +91,7 @@ import { Link } from
|
|
|
91
91
|
- Considere colapsar itens intermediários em telas menores usando BreadcrumbEllipsis.
|
|
92
92
|
- Evite usar href diretamente - causa reload completo da página.
|
|
93
93
|
|
|
94
|
-
> Fonte: `src
|
|
94
|
+
> Fonte: `src\design-system\docs\components\BreadcrumbDoc.tsx`
|
|
95
95
|
|
|
96
96
|
---
|
|
97
97
|
|
|
@@ -101,65 +101,65 @@ Exibe um menu ao usuário — como um conjunto de ações ou funções — acion
|
|
|
101
101
|
|
|
102
102
|
**Uso:**
|
|
103
103
|
```tsx
|
|
104
|
-
import {
|
|
105
|
-
ContextMenu,
|
|
106
|
-
ContextMenuContent,
|
|
107
|
-
ContextMenuItem,
|
|
108
|
-
ContextMenuTrigger,
|
|
109
|
-
ContextMenuCheckboxItem,
|
|
110
|
-
ContextMenuRadioGroup,
|
|
111
|
-
ContextMenuRadioItem,
|
|
112
|
-
ContextMenuLabel,
|
|
113
|
-
ContextMenuSeparator,
|
|
114
|
-
ContextMenuShortcut,
|
|
115
|
-
ContextMenuSub,
|
|
116
|
-
ContextMenuSubContent,
|
|
117
|
-
ContextMenuSubTrigger,
|
|
118
|
-
} from "forlogic-core"
|
|
119
|
-
|
|
120
|
-
<ContextMenu>
|
|
121
|
-
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
|
|
122
|
-
Clique com o botão direito aqui
|
|
123
|
-
</ContextMenuTrigger>
|
|
124
|
-
<ContextMenuContent className="w-64">
|
|
125
|
-
<ContextMenuItem inset>
|
|
126
|
-
Voltar
|
|
127
|
-
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
|
|
128
|
-
</ContextMenuItem>
|
|
129
|
-
<ContextMenuItem inset disabled>
|
|
130
|
-
Avançar
|
|
131
|
-
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
|
|
132
|
-
</ContextMenuItem>
|
|
133
|
-
<ContextMenuItem inset>
|
|
134
|
-
Recarregar
|
|
135
|
-
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
|
|
136
|
-
</ContextMenuItem>
|
|
137
|
-
<ContextMenuSub>
|
|
138
|
-
<ContextMenuSubTrigger inset>Mais Ferramentas</ContextMenuSubTrigger>
|
|
139
|
-
<ContextMenuSubContent className="w-48">
|
|
140
|
-
<ContextMenuItem>
|
|
141
|
-
Salvar Página Como...
|
|
142
|
-
<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
|
|
143
|
-
</ContextMenuItem>
|
|
144
|
-
<ContextMenuItem>Criar Atalho...</ContextMenuItem>
|
|
145
|
-
<ContextMenuItem>Nomear Janela...</ContextMenuItem>
|
|
146
|
-
<ContextMenuSeparator />
|
|
147
|
-
<ContextMenuItem>Ferramentas do Desenvolvedor</ContextMenuItem>
|
|
148
|
-
</ContextMenuSubContent>
|
|
149
|
-
</ContextMenuSub>
|
|
150
|
-
<ContextMenuSeparator />
|
|
151
|
-
<ContextMenuCheckboxItem checked>
|
|
152
|
-
Mostrar Barra de Favoritos
|
|
153
|
-
<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
|
|
154
|
-
</ContextMenuCheckboxItem>
|
|
155
|
-
<ContextMenuCheckboxItem>Mostrar URLs Completas</ContextMenuCheckboxItem>
|
|
156
|
-
<ContextMenuSeparator />
|
|
157
|
-
<ContextMenuRadioGroup value="pedro">
|
|
158
|
-
<ContextMenuLabel inset>Pessoas</ContextMenuLabel>
|
|
159
|
-
<ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
|
|
160
|
-
<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
|
|
161
|
-
</ContextMenuRadioGroup>
|
|
162
|
-
</ContextMenuContent>
|
|
104
|
+
import {
|
|
105
|
+
ContextMenu,
|
|
106
|
+
ContextMenuContent,
|
|
107
|
+
ContextMenuItem,
|
|
108
|
+
ContextMenuTrigger,
|
|
109
|
+
ContextMenuCheckboxItem,
|
|
110
|
+
ContextMenuRadioGroup,
|
|
111
|
+
ContextMenuRadioItem,
|
|
112
|
+
ContextMenuLabel,
|
|
113
|
+
ContextMenuSeparator,
|
|
114
|
+
ContextMenuShortcut,
|
|
115
|
+
ContextMenuSub,
|
|
116
|
+
ContextMenuSubContent,
|
|
117
|
+
ContextMenuSubTrigger,
|
|
118
|
+
} from "forlogic-core"
|
|
119
|
+
|
|
120
|
+
<ContextMenu>
|
|
121
|
+
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed">
|
|
122
|
+
Clique com o botão direito aqui
|
|
123
|
+
</ContextMenuTrigger>
|
|
124
|
+
<ContextMenuContent className="w-64">
|
|
125
|
+
<ContextMenuItem inset>
|
|
126
|
+
Voltar
|
|
127
|
+
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
|
|
128
|
+
</ContextMenuItem>
|
|
129
|
+
<ContextMenuItem inset disabled>
|
|
130
|
+
Avançar
|
|
131
|
+
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
|
|
132
|
+
</ContextMenuItem>
|
|
133
|
+
<ContextMenuItem inset>
|
|
134
|
+
Recarregar
|
|
135
|
+
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
|
|
136
|
+
</ContextMenuItem>
|
|
137
|
+
<ContextMenuSub>
|
|
138
|
+
<ContextMenuSubTrigger inset>Mais Ferramentas</ContextMenuSubTrigger>
|
|
139
|
+
<ContextMenuSubContent className="w-48">
|
|
140
|
+
<ContextMenuItem>
|
|
141
|
+
Salvar Página Como...
|
|
142
|
+
<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
|
|
143
|
+
</ContextMenuItem>
|
|
144
|
+
<ContextMenuItem>Criar Atalho...</ContextMenuItem>
|
|
145
|
+
<ContextMenuItem>Nomear Janela...</ContextMenuItem>
|
|
146
|
+
<ContextMenuSeparator />
|
|
147
|
+
<ContextMenuItem>Ferramentas do Desenvolvedor</ContextMenuItem>
|
|
148
|
+
</ContextMenuSubContent>
|
|
149
|
+
</ContextMenuSub>
|
|
150
|
+
<ContextMenuSeparator />
|
|
151
|
+
<ContextMenuCheckboxItem checked>
|
|
152
|
+
Mostrar Barra de Favoritos
|
|
153
|
+
<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
|
|
154
|
+
</ContextMenuCheckboxItem>
|
|
155
|
+
<ContextMenuCheckboxItem>Mostrar URLs Completas</ContextMenuCheckboxItem>
|
|
156
|
+
<ContextMenuSeparator />
|
|
157
|
+
<ContextMenuRadioGroup value="pedro">
|
|
158
|
+
<ContextMenuLabel inset>Pessoas</ContextMenuLabel>
|
|
159
|
+
<ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
|
|
160
|
+
<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
|
|
161
|
+
</ContextMenuRadioGroup>
|
|
162
|
+
</ContextMenuContent>
|
|
163
163
|
</ContextMenu>
|
|
164
164
|
```
|
|
165
165
|
|
|
@@ -191,7 +191,7 @@ import {
|
|
|
191
191
|
- Type-ahead: digitar caracteres foca no item correspondente
|
|
192
192
|
- Foco visual claro nos itens durante navegação por teclado
|
|
193
193
|
|
|
194
|
-
> Fonte: `src
|
|
194
|
+
> Fonte: `src\design-system\docs\components\ContextMenuDoc.tsx`
|
|
195
195
|
|
|
196
196
|
---
|
|
197
197
|
|
|
@@ -201,49 +201,49 @@ Exibe um menu ao usuário — como um conjunto de ações ou funções — acion
|
|
|
201
201
|
|
|
202
202
|
**Uso:**
|
|
203
203
|
```tsx
|
|
204
|
-
import {
|
|
205
|
-
DropdownMenu,
|
|
206
|
-
DropdownMenuContent,
|
|
207
|
-
DropdownMenuItem,
|
|
208
|
-
DropdownMenuLabel,
|
|
209
|
-
DropdownMenuSeparator,
|
|
210
|
-
DropdownMenuTrigger,
|
|
211
|
-
DropdownMenuShortcut,
|
|
212
|
-
DropdownMenuGroup,
|
|
213
|
-
DropdownMenuSub,
|
|
214
|
-
DropdownMenuSubContent,
|
|
215
|
-
DropdownMenuSubTrigger,
|
|
216
|
-
Button
|
|
217
|
-
} from "forlogic-core"
|
|
218
|
-
import { User, Settings, LogOut, ChevronDown } from "lucide-react"
|
|
219
|
-
|
|
220
|
-
<DropdownMenu>
|
|
221
|
-
<DropdownMenuTrigger asChild>
|
|
222
|
-
<Button variant="outline">
|
|
223
|
-
Abrir Menu
|
|
224
|
-
<ChevronDown className="ml-2 h-4 w-4" />
|
|
225
|
-
</Button>
|
|
226
|
-
</DropdownMenuTrigger>
|
|
227
|
-
<DropdownMenuContent className="w-56">
|
|
228
|
-
<DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
|
|
229
|
-
<DropdownMenuSeparator />
|
|
230
|
-
<DropdownMenuGroup>
|
|
231
|
-
<DropdownMenuItem>
|
|
232
|
-
<User className="mr-2 h-4 w-4" />
|
|
233
|
-
<span>Perfil</span>
|
|
234
|
-
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
235
|
-
</DropdownMenuItem>
|
|
236
|
-
<DropdownMenuItem>
|
|
237
|
-
<Settings className="mr-2 h-4 w-4" />
|
|
238
|
-
<span>Configurações</span>
|
|
239
|
-
</DropdownMenuItem>
|
|
240
|
-
</DropdownMenuGroup>
|
|
241
|
-
<DropdownMenuSeparator />
|
|
242
|
-
<DropdownMenuItem>
|
|
243
|
-
<LogOut className="mr-2 h-4 w-4" />
|
|
244
|
-
<span>Sair</span>
|
|
245
|
-
</DropdownMenuItem>
|
|
246
|
-
</DropdownMenuContent>
|
|
204
|
+
import {
|
|
205
|
+
DropdownMenu,
|
|
206
|
+
DropdownMenuContent,
|
|
207
|
+
DropdownMenuItem,
|
|
208
|
+
DropdownMenuLabel,
|
|
209
|
+
DropdownMenuSeparator,
|
|
210
|
+
DropdownMenuTrigger,
|
|
211
|
+
DropdownMenuShortcut,
|
|
212
|
+
DropdownMenuGroup,
|
|
213
|
+
DropdownMenuSub,
|
|
214
|
+
DropdownMenuSubContent,
|
|
215
|
+
DropdownMenuSubTrigger,
|
|
216
|
+
Button
|
|
217
|
+
} from "forlogic-core"
|
|
218
|
+
import { User, Settings, LogOut, ChevronDown } from "lucide-react"
|
|
219
|
+
|
|
220
|
+
<DropdownMenu>
|
|
221
|
+
<DropdownMenuTrigger asChild>
|
|
222
|
+
<Button variant="outline">
|
|
223
|
+
Abrir Menu
|
|
224
|
+
<ChevronDown className="ml-2 h-4 w-4" />
|
|
225
|
+
</Button>
|
|
226
|
+
</DropdownMenuTrigger>
|
|
227
|
+
<DropdownMenuContent className="w-56">
|
|
228
|
+
<DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
|
|
229
|
+
<DropdownMenuSeparator />
|
|
230
|
+
<DropdownMenuGroup>
|
|
231
|
+
<DropdownMenuItem>
|
|
232
|
+
<User className="mr-2 h-4 w-4" />
|
|
233
|
+
<span>Perfil</span>
|
|
234
|
+
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
235
|
+
</DropdownMenuItem>
|
|
236
|
+
<DropdownMenuItem>
|
|
237
|
+
<Settings className="mr-2 h-4 w-4" />
|
|
238
|
+
<span>Configurações</span>
|
|
239
|
+
</DropdownMenuItem>
|
|
240
|
+
</DropdownMenuGroup>
|
|
241
|
+
<DropdownMenuSeparator />
|
|
242
|
+
<DropdownMenuItem>
|
|
243
|
+
<LogOut className="mr-2 h-4 w-4" />
|
|
244
|
+
<span>Sair</span>
|
|
245
|
+
</DropdownMenuItem>
|
|
246
|
+
</DropdownMenuContent>
|
|
247
247
|
</DropdownMenu>
|
|
248
248
|
```
|
|
249
249
|
|
|
@@ -277,7 +277,7 @@ import { User, Settings, LogOut, ChevronDown } from "lucide-react"
|
|
|
277
277
|
- Type-ahead: digitar caracteres foca no item correspondente
|
|
278
278
|
- Itens desabilitados exibem tooltip explicativo no hover
|
|
279
279
|
|
|
280
|
-
> Fonte: `src
|
|
280
|
+
> Fonte: `src\design-system\docs\components\DropdownMenuDoc.tsx`
|
|
281
281
|
|
|
282
282
|
---
|
|
283
283
|
|
|
@@ -287,62 +287,62 @@ Barra de menu horizontal com submenus, checkboxes e radio items. Ideal para barr
|
|
|
287
287
|
|
|
288
288
|
**Uso:**
|
|
289
289
|
```tsx
|
|
290
|
-
import {
|
|
291
|
-
Menubar,
|
|
292
|
-
MenubarContent,
|
|
293
|
-
MenubarItem,
|
|
294
|
-
MenubarMenu,
|
|
295
|
-
MenubarSeparator,
|
|
296
|
-
MenubarShortcut,
|
|
297
|
-
MenubarTrigger,
|
|
298
|
-
MenubarCheckboxItem,
|
|
299
|
-
MenubarRadioGroup,
|
|
300
|
-
MenubarRadioItem,
|
|
301
|
-
MenubarSub,
|
|
302
|
-
MenubarSubContent,
|
|
303
|
-
MenubarSubTrigger,
|
|
304
|
-
} from "forlogic-core"
|
|
305
|
-
|
|
306
|
-
// Exemplo básico
|
|
307
|
-
<Menubar>
|
|
308
|
-
<MenubarMenu>
|
|
309
|
-
<MenubarTrigger>Arquivo</MenubarTrigger>
|
|
310
|
-
<MenubarContent>
|
|
311
|
-
<MenubarItem>
|
|
312
|
-
Novo <MenubarShortcut>⌘N</MenubarShortcut>
|
|
313
|
-
</MenubarItem>
|
|
314
|
-
<MenubarItem>Abrir</MenubarItem>
|
|
315
|
-
<MenubarSeparator />
|
|
316
|
-
<MenubarItem>Sair</MenubarItem>
|
|
317
|
-
</MenubarContent>
|
|
318
|
-
</MenubarMenu>
|
|
319
|
-
</Menubar>
|
|
320
|
-
|
|
321
|
-
// Com checkbox items
|
|
322
|
-
const [showBar, setShowBar] = useState(true);
|
|
323
|
-
|
|
324
|
-
<MenubarCheckboxItem
|
|
325
|
-
checked={showBar}
|
|
326
|
-
onCheckedChange={setShowBar}
|
|
327
|
-
>
|
|
328
|
-
Mostrar Barra
|
|
329
|
-
</MenubarCheckboxItem>
|
|
330
|
-
|
|
331
|
-
// Com radio group
|
|
332
|
-
const [theme, setTheme] = useState("light");
|
|
333
|
-
|
|
334
|
-
<MenubarRadioGroup value={theme} onValueChange={setTheme}>
|
|
335
|
-
<MenubarRadioItem value="light">Claro</MenubarRadioItem>
|
|
336
|
-
<MenubarRadioItem value="dark">Escuro</MenubarRadioItem>
|
|
337
|
-
</MenubarRadioGroup>
|
|
338
|
-
|
|
339
|
-
// Com submenus
|
|
340
|
-
<MenubarSub>
|
|
341
|
-
<MenubarSubTrigger>Exportar</MenubarSubTrigger>
|
|
342
|
-
<MenubarSubContent>
|
|
343
|
-
<MenubarItem>PDF</MenubarItem>
|
|
344
|
-
<MenubarItem>Word</MenubarItem>
|
|
345
|
-
</MenubarSubContent>
|
|
290
|
+
import {
|
|
291
|
+
Menubar,
|
|
292
|
+
MenubarContent,
|
|
293
|
+
MenubarItem,
|
|
294
|
+
MenubarMenu,
|
|
295
|
+
MenubarSeparator,
|
|
296
|
+
MenubarShortcut,
|
|
297
|
+
MenubarTrigger,
|
|
298
|
+
MenubarCheckboxItem,
|
|
299
|
+
MenubarRadioGroup,
|
|
300
|
+
MenubarRadioItem,
|
|
301
|
+
MenubarSub,
|
|
302
|
+
MenubarSubContent,
|
|
303
|
+
MenubarSubTrigger,
|
|
304
|
+
} from "forlogic-core"
|
|
305
|
+
|
|
306
|
+
// Exemplo básico
|
|
307
|
+
<Menubar>
|
|
308
|
+
<MenubarMenu>
|
|
309
|
+
<MenubarTrigger>Arquivo</MenubarTrigger>
|
|
310
|
+
<MenubarContent>
|
|
311
|
+
<MenubarItem>
|
|
312
|
+
Novo <MenubarShortcut>⌘N</MenubarShortcut>
|
|
313
|
+
</MenubarItem>
|
|
314
|
+
<MenubarItem>Abrir</MenubarItem>
|
|
315
|
+
<MenubarSeparator />
|
|
316
|
+
<MenubarItem>Sair</MenubarItem>
|
|
317
|
+
</MenubarContent>
|
|
318
|
+
</MenubarMenu>
|
|
319
|
+
</Menubar>
|
|
320
|
+
|
|
321
|
+
// Com checkbox items
|
|
322
|
+
const [showBar, setShowBar] = useState(true);
|
|
323
|
+
|
|
324
|
+
<MenubarCheckboxItem
|
|
325
|
+
checked={showBar}
|
|
326
|
+
onCheckedChange={setShowBar}
|
|
327
|
+
>
|
|
328
|
+
Mostrar Barra
|
|
329
|
+
</MenubarCheckboxItem>
|
|
330
|
+
|
|
331
|
+
// Com radio group
|
|
332
|
+
const [theme, setTheme] = useState("light");
|
|
333
|
+
|
|
334
|
+
<MenubarRadioGroup value={theme} onValueChange={setTheme}>
|
|
335
|
+
<MenubarRadioItem value="light">Claro</MenubarRadioItem>
|
|
336
|
+
<MenubarRadioItem value="dark">Escuro</MenubarRadioItem>
|
|
337
|
+
</MenubarRadioGroup>
|
|
338
|
+
|
|
339
|
+
// Com submenus
|
|
340
|
+
<MenubarSub>
|
|
341
|
+
<MenubarSubTrigger>Exportar</MenubarSubTrigger>
|
|
342
|
+
<MenubarSubContent>
|
|
343
|
+
<MenubarItem>PDF</MenubarItem>
|
|
344
|
+
<MenubarItem>Word</MenubarItem>
|
|
345
|
+
</MenubarSubContent>
|
|
346
346
|
</MenubarSub>
|
|
347
347
|
```
|
|
348
348
|
|
|
@@ -365,48 +365,48 @@ const [theme, setTheme] = useState("light");
|
|
|
365
365
|
|
|
366
366
|
**Exemplos:**
|
|
367
367
|
```tsx
|
|
368
|
-
<Menubar>
|
|
369
|
-
<MenubarMenu>
|
|
370
|
-
<MenubarTrigger>Arquivo</MenubarTrigger>
|
|
371
|
-
<MenubarContent>
|
|
372
|
-
<MenubarItem>Novo</MenubarItem>
|
|
373
|
-
<MenubarItem>Abrir</MenubarItem>
|
|
374
|
-
<MenubarSeparator />
|
|
375
|
-
<MenubarItem>Salvar</MenubarItem>
|
|
376
|
-
</MenubarContent>
|
|
377
|
-
</MenubarMenu>
|
|
378
|
-
<MenubarMenu>
|
|
379
|
-
<MenubarTrigger>Editar</MenubarTrigger>
|
|
380
|
-
<MenubarContent>
|
|
381
|
-
<MenubarItem>Desfazer</MenubarItem>
|
|
382
|
-
<MenubarItem>Refazer</MenubarItem>
|
|
383
|
-
</MenubarContent>
|
|
384
|
-
</MenubarMenu>
|
|
368
|
+
<Menubar>
|
|
369
|
+
<MenubarMenu>
|
|
370
|
+
<MenubarTrigger>Arquivo</MenubarTrigger>
|
|
371
|
+
<MenubarContent>
|
|
372
|
+
<MenubarItem>Novo</MenubarItem>
|
|
373
|
+
<MenubarItem>Abrir</MenubarItem>
|
|
374
|
+
<MenubarSeparator />
|
|
375
|
+
<MenubarItem>Salvar</MenubarItem>
|
|
376
|
+
</MenubarContent>
|
|
377
|
+
</MenubarMenu>
|
|
378
|
+
<MenubarMenu>
|
|
379
|
+
<MenubarTrigger>Editar</MenubarTrigger>
|
|
380
|
+
<MenubarContent>
|
|
381
|
+
<MenubarItem>Desfazer</MenubarItem>
|
|
382
|
+
<MenubarItem>Refazer</MenubarItem>
|
|
383
|
+
</MenubarContent>
|
|
384
|
+
</MenubarMenu>
|
|
385
385
|
</Menubar>
|
|
386
386
|
```
|
|
387
387
|
```tsx
|
|
388
|
-
<Menubar>
|
|
389
|
-
<MenubarMenu>
|
|
390
|
-
<MenubarTrigger>Editar</MenubarTrigger>
|
|
391
|
-
<MenubarContent>
|
|
392
|
-
<MenubarItem>
|
|
393
|
-
Desfazer <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
394
|
-
</MenubarItem>
|
|
395
|
-
<MenubarItem>
|
|
396
|
-
Refazer <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
397
|
-
</MenubarItem>
|
|
398
|
-
<MenubarSeparator />
|
|
399
|
-
<MenubarItem>
|
|
400
|
-
Recortar <MenubarShortcut>⌘X</MenubarShortcut>
|
|
401
|
-
</MenubarItem>
|
|
402
|
-
<MenubarItem>
|
|
403
|
-
Copiar <MenubarShortcut>⌘C</MenubarShortcut>
|
|
404
|
-
</MenubarItem>
|
|
405
|
-
<MenubarItem>
|
|
406
|
-
Colar <MenubarShortcut>⌘V</MenubarShortcut>
|
|
407
|
-
</MenubarItem>
|
|
408
|
-
</MenubarContent>
|
|
409
|
-
</MenubarMenu>
|
|
388
|
+
<Menubar>
|
|
389
|
+
<MenubarMenu>
|
|
390
|
+
<MenubarTrigger>Editar</MenubarTrigger>
|
|
391
|
+
<MenubarContent>
|
|
392
|
+
<MenubarItem>
|
|
393
|
+
Desfazer <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
394
|
+
</MenubarItem>
|
|
395
|
+
<MenubarItem>
|
|
396
|
+
Refazer <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
397
|
+
</MenubarItem>
|
|
398
|
+
<MenubarSeparator />
|
|
399
|
+
<MenubarItem>
|
|
400
|
+
Recortar <MenubarShortcut>⌘X</MenubarShortcut>
|
|
401
|
+
</MenubarItem>
|
|
402
|
+
<MenubarItem>
|
|
403
|
+
Copiar <MenubarShortcut>⌘C</MenubarShortcut>
|
|
404
|
+
</MenubarItem>
|
|
405
|
+
<MenubarItem>
|
|
406
|
+
Colar <MenubarShortcut>⌘V</MenubarShortcut>
|
|
407
|
+
</MenubarItem>
|
|
408
|
+
</MenubarContent>
|
|
409
|
+
</MenubarMenu>
|
|
410
410
|
</Menubar>
|
|
411
411
|
```
|
|
412
412
|
|
|
@@ -426,7 +426,7 @@ const [theme, setTheme] = useState("light");
|
|
|
426
426
|
- em MenubarItem quando precisar alinhar com CheckboxItems/RadioItems
|
|
427
427
|
- Para menus contextuais (clique direito), use ContextMenu ao invés de Menubar
|
|
428
428
|
|
|
429
|
-
> Fonte: `src
|
|
429
|
+
> Fonte: `src\design-system\docs\components\MenubarDoc.tsx`
|
|
430
430
|
|
|
431
431
|
---
|
|
432
432
|
|
|
@@ -438,34 +438,88 @@ const [theme, setTheme] = useState("light");
|
|
|
438
438
|
|
|
439
439
|
### Pagination
|
|
440
440
|
|
|
441
|
-
|
|
441
|
+
Barra de paginação completa com seletor de itens por página e controles de navegação.
|
|
442
|
+
|
|
443
|
+
**Uso:**
|
|
444
|
+
```tsx
|
|
445
|
+
import { Pagination } from "forlogic-core/crud"
|
|
446
|
+
|
|
447
|
+
<Pagination
|
|
448
|
+
currentPage={1}
|
|
449
|
+
totalPages={10}
|
|
450
|
+
totalItems={100}
|
|
451
|
+
itemsPerPage={10}
|
|
452
|
+
onPageChange={(page) => setPage(page)}
|
|
453
|
+
onItemsPerPageChange={(limit) => setLimit(limit)}
|
|
454
|
+
variant="full"
|
|
455
|
+
/>
|
|
456
|
+
```
|
|
442
457
|
|
|
443
|
-
|
|
458
|
+
**Props:**
|
|
459
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
460
|
+
|------|------|--------|-----------|
|
|
461
|
+
| `currentPage` | `number` | - | Página atual (1-indexed) |
|
|
462
|
+
| `totalPages` | `number` | - | Número total de páginas |
|
|
463
|
+
| `totalItems` | `number` | - | Número total de itens |
|
|
464
|
+
| `itemsPerPage` | `number` | - | Quantidade de itens por página |
|
|
465
|
+
| `onPageChange` | `(page: number) => void` | - | Callback ao mudar de página |
|
|
466
|
+
| `onItemsPerPageChange` | `(limit: number) => void` | - | Callback ao mudar itens por página |
|
|
467
|
+
|
|
468
|
+
**Exemplos:**
|
|
469
|
+
```tsx
|
|
470
|
+
<Pagination
|
|
471
|
+
currentPage={1}
|
|
472
|
+
totalPages={2}
|
|
473
|
+
totalItems={15}
|
|
474
|
+
itemsPerPage={10}
|
|
475
|
+
onPageChange={setPage}
|
|
476
|
+
onItemsPerPageChange={setItemsPerPage}
|
|
477
|
+
variant=
|
|
478
|
+
```
|
|
479
|
+
```tsx
|
|
480
|
+
<Pagination
|
|
481
|
+
currentPage={3}
|
|
482
|
+
totalPages={25}
|
|
483
|
+
totalItems={250}
|
|
484
|
+
itemsPerPage={10}
|
|
485
|
+
onPageChange={setPage}
|
|
486
|
+
onItemsPerPageChange={setItemsPerPage}
|
|
487
|
+
variant=
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
**Acessibilidade:**
|
|
491
|
+
- Navegável por teclado
|
|
492
|
+
- Labels ARIA apropriados
|
|
493
|
+
- Indicação visual da página atual
|
|
494
|
+
- Botões desabilitados quando não aplicável
|
|
495
|
+
- Amigável para leitores de tela
|
|
496
|
+
|
|
497
|
+
> Fonte: `src\design-system\docs\components\PaginationDoc.tsx`
|
|
444
498
|
|
|
445
499
|
---
|
|
446
500
|
|
|
447
501
|
### Select
|
|
448
502
|
|
|
449
|
-
Exibe uma lista de opções para o usuário escolher—acionada por um botão.
|
|
503
|
+
Exibe uma lista de opções para o usuário escolher—acionada por um botão. O item selecionado é destacado por background (accent), fonte medium e borda esquerda na cor primary. A prop `showCheck` (opcional) adiciona um ícone de check à esquerda do item selecionado.
|
|
450
504
|
|
|
451
505
|
**Uso:**
|
|
452
506
|
```tsx
|
|
453
|
-
import {
|
|
454
|
-
Select,
|
|
455
|
-
SelectContent,
|
|
456
|
-
SelectItem,
|
|
457
|
-
SelectTrigger,
|
|
458
|
-
SelectValue,
|
|
459
|
-
} from "forlogic-core"
|
|
460
|
-
|
|
461
|
-
<Select>
|
|
462
|
-
<SelectTrigger className="w-[180px]">
|
|
463
|
-
<SelectValue placeholder="Theme" />
|
|
464
|
-
</SelectTrigger>
|
|
465
|
-
<SelectContent>
|
|
466
|
-
<SelectItem value="light">Light</SelectItem>
|
|
467
|
-
<SelectItem value="dark">Dark</SelectItem>
|
|
468
|
-
</SelectContent>
|
|
507
|
+
import {
|
|
508
|
+
Select,
|
|
509
|
+
SelectContent,
|
|
510
|
+
SelectItem,
|
|
511
|
+
SelectTrigger,
|
|
512
|
+
SelectValue,
|
|
513
|
+
} from "forlogic-core"
|
|
514
|
+
|
|
515
|
+
<Select>
|
|
516
|
+
<SelectTrigger className="w-[180px]">
|
|
517
|
+
<SelectValue placeholder="Theme" />
|
|
518
|
+
</SelectTrigger>
|
|
519
|
+
<SelectContent>
|
|
520
|
+
<SelectItem value="light">Light</SelectItem>
|
|
521
|
+
<SelectItem value="dark">Dark</SelectItem>
|
|
522
|
+
</SelectContent>
|
|
469
523
|
</Select>
|
|
470
524
|
```
|
|
471
525
|
|
|
@@ -476,6 +530,7 @@ import {
|
|
|
476
530
|
| `value` | `string` | - | O valor selecionado controlado. |
|
|
477
531
|
| `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando o valor muda. |
|
|
478
532
|
| `disabled` | `boolean` | false | Se o select está desabilitado. |
|
|
533
|
+
| `showCheck` | `boolean` | false | Exibe o ícone de check à esquerda do item selecionado. Quando false, o item selecionado é destacado apenas pelo background, fonte medium e borda esquerda primary. |
|
|
479
534
|
| `container (SelectContent)` | `HTMLElement` | - | Container HTML para portal (útil dentro de Dialog). |
|
|
480
535
|
| `collisionBoundary (SelectContent)` | `HTMLElement` | - | Elemento para detecção de colisão de posicionamento. |
|
|
481
536
|
|
|
@@ -491,13 +546,17 @@ import {
|
|
|
491
546
|
- quando o Select estiver dentro de um Dialog para evitar problemas de scroll
|
|
492
547
|
- 💡 Para seleção com busca, considere usar
|
|
493
548
|
- ao invés de
|
|
494
|
-
- ,
|
|
549
|
+
- ,
|
|
495
550
|
|
|
496
551
|
- rounded-lg
|
|
497
552
|
- hover:border-primary
|
|
498
553
|
- transition-colors
|
|
554
|
+
- ,
|
|
555
|
+
|
|
556
|
+
- Combobox
|
|
557
|
+
- showCheck
|
|
499
558
|
|
|
500
|
-
> Fonte: `src
|
|
559
|
+
> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
|
|
501
560
|
|
|
502
561
|
---
|
|
503
562
|
|
|
@@ -507,19 +566,19 @@ Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout
|
|
|
507
566
|
|
|
508
567
|
**Uso:**
|
|
509
568
|
```tsx
|
|
510
|
-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
|
|
511
|
-
|
|
512
|
-
<Tabs defaultValue="account">
|
|
513
|
-
<TabsList>
|
|
514
|
-
<TabsTrigger value="account">Conta</TabsTrigger>
|
|
515
|
-
<TabsTrigger value="password">Senha</TabsTrigger>
|
|
516
|
-
</TabsList>
|
|
517
|
-
<TabsContent value="account">
|
|
518
|
-
Faça alterações na sua conta aqui.
|
|
519
|
-
</TabsContent>
|
|
520
|
-
<TabsContent value="password">
|
|
521
|
-
Altere sua senha aqui.
|
|
522
|
-
</TabsContent>
|
|
569
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
|
|
570
|
+
|
|
571
|
+
<Tabs defaultValue="account">
|
|
572
|
+
<TabsList>
|
|
573
|
+
<TabsTrigger value="account">Conta</TabsTrigger>
|
|
574
|
+
<TabsTrigger value="password">Senha</TabsTrigger>
|
|
575
|
+
</TabsList>
|
|
576
|
+
<TabsContent value="account">
|
|
577
|
+
Faça alterações na sua conta aqui.
|
|
578
|
+
</TabsContent>
|
|
579
|
+
<TabsContent value="password">
|
|
580
|
+
Altere sua senha aqui.
|
|
581
|
+
</TabsContent>
|
|
523
582
|
</Tabs>
|
|
524
583
|
```
|
|
525
584
|
|
|
@@ -545,6 +604,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
|
|
|
545
604
|
- TabPageLayout inclui separador automático e scroll area
|
|
546
605
|
- Para barras de menu estilo desktop, veja o componente **Menubar**
|
|
547
606
|
|
|
548
|
-
> Fonte: `src
|
|
607
|
+
> Fonte: `src\design-system\docs\components\TabsDoc.tsx`
|
|
549
608
|
|
|
550
609
|
---
|