forlogic-core 1.16.3 → 1.16.5
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 +113 -109
- package/dist/README.md +113 -109
- package/dist/components/modules/AccessDeniedDialog.d.ts +41 -0
- package/dist/components/modules/ModuleAccessGuard.d.ts +3 -1
- package/dist/components/modules/ModuleOfferContent.d.ts +20 -0
- package/dist/components/modules/ModulesContent.d.ts +15 -0
- package/dist/components/modules/ModulesFooterCards.d.ts +6 -0
- package/dist/components/modules/index.d.ts +8 -0
- package/dist/components/modules/types.d.ts +2 -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/DESIGN_SYSTEM.md +17 -32
- package/package.json +4 -2
- package/dist/assets/AccordionDoc-BnfxyOi9.js +0 -31
- package/dist/assets/ActionButtonDoc-b4F_J8gn.js +0 -47
- package/dist/assets/AlertDoc-PkiHguSJ.js +0 -37
- package/dist/assets/AppHeaderDoc-CsFMZGV0.js +0 -67
- package/dist/assets/AppSidebarDoc-Bg71N-zq.js +0 -196
- package/dist/assets/AuthDoc-DDm57y_J.js +0 -192
- package/dist/assets/AvatarDoc-C6wiZIZR.js +0 -11
- package/dist/assets/BadgeDoc-Bsg7cfm0.js +0 -36
- package/dist/assets/BaseFormDoc-DeIlV273.js +0 -169
- package/dist/assets/BodyContentDoc-Q3DGvyN9.js +0 -83
- package/dist/assets/BreadcrumbDoc-ChsVFjMF.js +0 -75
- package/dist/assets/ButtonDoc-C7Q31Bh3.js +0 -41
- package/dist/assets/ButtonGroupDoc-Bn5vhjBq.js +0 -7
- package/dist/assets/CalendarDoc-iVjNyxyr.js +0 -81
- package/dist/assets/CardDoc-D511dll7.js +0 -49
- package/dist/assets/ChartDoc-CQyYOEHL.js +0 -111
- package/dist/assets/CheckboxDoc-Cjsy4XAq.js +0 -55
- package/dist/assets/ColorPickerDoc-hnYJUWpF.js +0 -10
- package/dist/assets/ColorsFoundationDoc-B8Z4tAyZ.js +0 -13
- package/dist/assets/ComboTreeDoc-ChEbW4a3.js +0 -21
- package/dist/assets/ComboboxDoc-CHWeGE_F.js +0 -134
- package/dist/assets/ComponentDocTemplate-BtOCnlM2.js +0 -1
- package/dist/assets/ContextMenuDoc-C3mFO_Yx.js +0 -182
- package/dist/assets/ContextsDoc-ChEbQxom.js +0 -184
- package/dist/assets/CreateCrudPageDoc-C9tXisCF.js +0 -106
- package/dist/assets/CrudActionBarDoc-Cp1L4gpO.js +0 -112
- package/dist/assets/CrudGridDoc-D-kSFBAQ.js +0 -85
- package/dist/assets/CrudOverviewDoc-CeLBwg-B.js +0 -14
- package/dist/assets/CrudPrimitivesDoc-B2u1vZog.js +0 -164
- package/dist/assets/CrudTableDoc-CvV-II_X.js +0 -95
- package/dist/assets/DataListDoc-BLRii0jB.js +0 -13
- package/dist/assets/DesignSystemHome-TE0Ubaup.js +0 -1
- package/dist/assets/DialogDoc--LC5Jvat.js +0 -981
- package/dist/assets/DropdownMenuDoc-oPlEriRY.js +0 -175
- package/dist/assets/EmptyStateDoc-rNqfWKok.js +0 -35
- package/dist/assets/EnvironmentsDoc-CT7l5s2u.js +0 -96
- package/dist/assets/ErrorBoundaryDoc-rPHOUygA.js +0 -111
- package/dist/assets/ExampleCard-DfuMYM6E.js +0 -1
- package/dist/assets/FormDoc-B0L_QaCT.js +0 -81
- package/dist/assets/FoundationOverview-Dbb8rBsU.js +0 -1
- package/dist/assets/GridDoc-ifcGA2Yw.js +0 -28
- package/dist/assets/HooksDoc-CUOT_3Du.js +0 -665
- package/dist/assets/HoverCardDoc-CdTU2QkI.js +0 -31
- package/dist/assets/I18nDoc-CMEvFqsz.js +0 -232
- package/dist/assets/IconPickerDoc-DF9hEwnJ.js +0 -10
- package/dist/assets/IconsFoundationDoc-D4Y0wKbm.js +0 -33
- package/dist/assets/InputDoc-d_IL4dsq.js +0 -211
- package/dist/assets/LabelDoc-Dr64ISiJ.js +0 -42
- package/dist/assets/LeadershipDoc-BnrTuaeV.js +0 -416
- package/dist/assets/MediaDoc-CLuVprAr.js +0 -459
- package/dist/assets/MenubarDoc-CW7L4QJ4.js +0 -165
- package/dist/assets/ModulesDialogDoc-CUb_g4X-.js +0 -71
- package/dist/assets/NavigationMenuDoc-Csc0U6bV.js +0 -116
- package/dist/assets/OnboardingDialogDoc-3RtjNH1O.js +0 -55
- package/dist/assets/PaginationDoc-BGurD4xQ.js +0 -27
- package/dist/assets/PaginationDoc-DqFyou6O.js +0 -98
- package/dist/assets/PlacesDoc-Dyx8gsqb.js +0 -226
- package/dist/assets/PopoverDoc-DHF-ItUX.js +0 -64
- package/dist/assets/ProgressDoc-DXKV-fkI.js +0 -29
- package/dist/assets/QualiexUserFieldDoc-BbP7w-Pu.js +0 -149
- package/dist/assets/RadioGroupDoc-D845uweM.js +0 -57
- package/dist/assets/RadiusDoc-vN4tTsay.js +0 -7
- package/dist/assets/RequiredFieldsCounterDoc-TzR9r-U9.js +0 -58
- package/dist/assets/ResizableDoc-Bkfz_25O.js +0 -104
- package/dist/assets/RichTextEditorDoc-BUQrg7M8.js +0 -24
- package/dist/assets/ScrollAreaDoc-B6ODYHMX.js +0 -28
- package/dist/assets/SecurityDoc-Chbt6w1s.js +0 -204
- package/dist/assets/SelectDoc-BhcpBIAO.js +0 -80
- package/dist/assets/SeparatorDoc-C3fhatb0.js +0 -4
- package/dist/assets/ServicesDoc-_uao-HA_.js +0 -308
- package/dist/assets/ShadowsDoc-DpkO_TZQ.js +0 -9
- package/dist/assets/SignDoc-BJtnoT6I.js +0 -66
- package/dist/assets/SkeletonDoc-BZS07PJh.js +0 -54
- package/dist/assets/SliderDoc-D2ApV3XT.js +0 -41
- package/dist/assets/SpacingDoc-PNrU24B2.js +0 -12
- package/dist/assets/SplitButtonDoc-D5tUF2Ja.js +0 -53
- package/dist/assets/StepSelectorDoc-Cj0ALYar.js +0 -41
- package/dist/assets/SwitchDoc-DtsT8oh_.js +0 -56
- package/dist/assets/TableDoc-BC-jQnXu.js +0 -128
- package/dist/assets/TableOfContents-DBMJMbI4.js +0 -1
- package/dist/assets/TabsDoc-DtXJ0xY5.js +0 -42
- package/dist/assets/TextareaDoc-nuW5tqBQ.js +0 -46
- package/dist/assets/ToastDoc-D1aX5zda.js +0 -157
- package/dist/assets/ToggleDoc-ILass4CS.js +0 -51
- package/dist/assets/TooltipDoc-lPbdWe_9.js +0 -58
- package/dist/assets/TruncatedCellDoc-DOAzbF2F.js +0 -12
- package/dist/assets/TypographyFoundationDoc-3ZD-rQZw.js +0 -7
- package/dist/assets/UtilitiesDoc-D7lkYhuz.js +0 -145
- package/dist/assets/blocks-Jy49RoqJ.js +0 -1
- package/dist/assets/calendar-days-Cvf2zLJl.js +0 -1
- package/dist/assets/circle-plus-MnG9kjyq.js +0 -1
- package/dist/assets/circle-x-B9ouupla.js +0 -1
- package/dist/assets/crown-BweN5jpI.js +0 -1
- package/dist/assets/date-picker-ttyYeYvC.js +0 -1
- package/dist/assets/disabled-menu-item-WlpPOqxg.js +0 -1
- package/dist/assets/drawer-DvU6_eK5.js +0 -3
- package/dist/assets/file-pen-line-C0VV-QjF.js +0 -1
- package/dist/assets/git-branch-DCjGGwvF.js +0 -1
- package/dist/assets/globe-BdFDFP_k.js +0 -1
- package/dist/assets/grip-vertical-CgXp0oI-.js +0 -1
- package/dist/assets/hash-BAYi_wfk.js +0 -1
- package/dist/assets/index-BtX5DZqb.js +0 -310
- package/dist/assets/index-C1So5Sai.css +0 -1
- package/dist/assets/life-buoy-BydIgTyJ.js +0 -1
- package/dist/assets/lucide-react-ZIMhRYmb.js +0 -1
- package/dist/assets/monitor-B6txWJPg.js +0 -1
- package/dist/assets/package-DNe3FsCh.js +0 -1
- package/dist/assets/pen-CzTmQ16z.js +0 -1
- package/dist/assets/pin-CJJgLEBz.js +0 -1
- package/dist/assets/radio-group-Btv_BY60.js +0 -1
- package/dist/assets/server-XQDXtrjm.js +0 -1
- package/dist/assets/share-2-Dz_89MJb.js +0 -1
- package/dist/assets/step-selector-D0_Y1dow.js +0 -1
- package/dist/assets/text-align-start-WsHo7CNJ.js +0 -1
- package/dist/assets/trash-CeK-mWnM.js +0 -1
- package/dist/assets/useMockCrud-RV9z9n5x.js +0 -1
- package/dist/assets/user-check-CrbWcnPN.js +0 -1
- package/dist/assets/user-plus-Dce9DbqQ.js +0 -1
- package/dist/index.html +0 -35
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import{r as m,j as e,C as a,a as t,b as r,d as i,cd as C,ce as I,cf as x,t as w,ba as y,cg as u,dR as h,B as v,aD as T,aM as A,f}from"./index-BtX5DZqb.js";function k(){const[n,c]=m.useState(1),[l,g]=m.useState(10),d=157,j=Math.ceil(d/l),[p,b]=m.useState(1),[o,D]=m.useState(10),P=45,S=Math.ceil(P/o),E=Array.from({length:P},(s,N)=>({id:N+1,name:`Item ${N+1}`,status:N%3===0?"active":"inactive"})).slice((p-1)*o,p*o);return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold",children:"Pagination"}),e.jsx("p",{className:"text-lg text-muted-foreground mt-2",children:"Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa."})]}),e.jsxs(a,{children:[e.jsx(t,{children:e.jsx(r,{className:"text-base",children:"Índice"})}),e.jsx(i,{children:e.jsxs("ul",{className:"grid grid-cols-2 gap-2 text-sm",children:[e.jsx("li",{children:e.jsx("a",{href:"#instalacao",className:"text-primary hover:underline",children:"Instalação"})}),e.jsx("li",{children:e.jsx("a",{href:"#uso-basico",className:"text-primary hover:underline",children:"Uso Básico"})}),e.jsx("li",{children:e.jsx("a",{href:"#variantes",className:"text-primary hover:underline",children:"Variantes"})}),e.jsx("li",{children:e.jsx("a",{href:"#com-dados",className:"text-primary hover:underline",children:"Com Dados Reais"})}),e.jsx("li",{children:e.jsx("a",{href:"#props",className:"text-primary hover:underline",children:"Propriedades"})}),e.jsx("li",{children:e.jsx("a",{href:"#erros-comuns",className:"text-primary hover:underline",children:"Erros Comuns"})}),e.jsx("li",{children:e.jsx("a",{href:"#acessibilidade",className:"text-primary hover:underline",children:"Acessibilidade"})})]})})]}),e.jsxs(a,{id:"instalacao",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Instalação"})}),e.jsx(i,{children:e.jsx("pre",{className:"bg-muted p-4 rounded-lg text-sm overflow-x-auto",children:`import { CrudPrimitivePagination } from 'forlogic-core';
|
|
2
|
-
|
|
3
|
-
// Alias para uso mais curto
|
|
4
|
-
import { CrudPrimitivePagination as Pagination } from 'forlogic-core';`})})]}),e.jsxs(a,{id:"uso-basico",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Uso Básico"})}),e.jsx(i,{children:e.jsxs(C,{defaultValue:"preview",className:"w-full",children:[e.jsxs(I,{className:"mb-4",children:[e.jsxs(x,{value:"preview",className:"gap-2",children:[e.jsx(w,{size:16}),"Preview"]}),e.jsxs(x,{value:"code",className:"gap-2",children:[e.jsx(y,{size:16}),"Código"]})]}),e.jsxs(u,{value:"preview",className:"mt-0",children:[e.jsx("div",{className:"border rounded-lg bg-muted/30",children:e.jsx(h,{currentPage:n,totalPages:j,totalItems:d,itemsPerPage:l,onPageChange:c,onItemsPerPageChange:s=>{g(s),c(1)},variant:"full"})}),e.jsxs("p",{className:"text-xs text-muted-foreground mt-2",children:["Página atual: ",n," | Itens por página: ",l," | Total: ",d]})]}),e.jsx(u,{value:"code",className:"mt-0",children:e.jsx("pre",{className:"bg-muted p-4 rounded-lg text-sm overflow-x-auto",children:`import { useState } from 'react';
|
|
5
|
-
import { CrudPrimitivePagination } from 'forlogic-core';
|
|
6
|
-
|
|
7
|
-
function MyComponent() {
|
|
8
|
-
const [currentPage, setCurrentPage] = useState(1);
|
|
9
|
-
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
10
|
-
const totalItems = 157;
|
|
11
|
-
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<CrudPrimitivePagination
|
|
15
|
-
currentPage={currentPage}
|
|
16
|
-
totalPages={totalPages}
|
|
17
|
-
totalItems={totalItems}
|
|
18
|
-
itemsPerPage={itemsPerPage}
|
|
19
|
-
onPageChange={setCurrentPage}
|
|
20
|
-
onItemsPerPageChange={(value) => {
|
|
21
|
-
setItemsPerPage(value);
|
|
22
|
-
setCurrentPage(1); // Reset para primeira página
|
|
23
|
-
}}
|
|
24
|
-
variant="full"
|
|
25
|
-
/>
|
|
26
|
-
);
|
|
27
|
-
}`})})]})})]}),e.jsxs(a,{id:"variantes",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Variantes"})}),e.jsxs(i,{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(v,{children:'variant="full"'}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"Padrão - com seletor de itens"})]}),e.jsx("div",{className:"border rounded-lg bg-muted/30",children:e.jsx(h,{currentPage:n,totalPages:j,totalItems:d,itemsPerPage:l,onPageChange:c,onItemsPerPageChange:g,variant:"full"})})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(v,{variant:"secondary",children:'variant="compact"'}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"Sem seletor de itens"})]}),e.jsx("div",{className:"border rounded-lg bg-muted/30",children:e.jsx(h,{currentPage:n,totalPages:j,totalItems:d,itemsPerPage:l,onPageChange:c,onItemsPerPageChange:g,variant:"compact"})})]}),e.jsxs("div",{className:"p-4 border rounded-lg bg-muted/30",children:[e.jsx("p",{className:"text-sm font-medium mb-2",children:"Layout Visual (3 colunas):"}),e.jsx("pre",{className:"text-xs text-muted-foreground",children:`┌────────────────────────────────────────────────────────────────┐
|
|
28
|
-
│ [Itens: 10 ▼] │ 1-10 de 157 itens │ [<<] [<] 1 de 16 [>] [>>] │
|
|
29
|
-
│ ESQUERDA │ CENTRO │ DIREITA │
|
|
30
|
-
└────────────────────────────────────────────────────────────────┘`})]})]})]}),e.jsxs(a,{id:"com-dados",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Com Dados Reais"})}),e.jsxs(i,{children:[e.jsx("p",{className:"text-muted-foreground mb-4",children:"Exemplo prático de paginação integrada com uma lista de dados."}),e.jsxs(C,{defaultValue:"preview",className:"w-full",children:[e.jsxs(I,{className:"mb-4",children:[e.jsxs(x,{value:"preview",className:"gap-2",children:[e.jsx(w,{size:16}),"Preview"]}),e.jsxs(x,{value:"code",className:"gap-2",children:[e.jsx(y,{size:16}),"Código"]})]}),e.jsxs(u,{value:"preview",className:"mt-0 space-y-4",children:[e.jsx("div",{className:"border rounded-lg divide-y",children:E.map(s=>e.jsxs("div",{className:"flex items-center justify-between p-3",children:[e.jsx("span",{className:"font-medium",children:s.name}),e.jsx(v,{variant:s.status==="active"?"default":"secondary",children:s.status==="active"?"Ativo":"Inativo"})]},s.id))}),e.jsx("div",{className:"border rounded-lg",children:e.jsx(h,{currentPage:p,totalPages:S,totalItems:P,itemsPerPage:o,onPageChange:b,onItemsPerPageChange:s=>{D(s),b(1)},variant:"full"})})]}),e.jsx(u,{value:"code",className:"mt-0",children:e.jsx("pre",{className:"bg-muted p-4 rounded-lg text-sm overflow-x-auto",children:`import { useState } from 'react';
|
|
31
|
-
import { CrudPrimitivePagination } from 'forlogic-core';
|
|
32
|
-
|
|
33
|
-
function DataList({ items }) {
|
|
34
|
-
const [currentPage, setCurrentPage] = useState(1);
|
|
35
|
-
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
36
|
-
|
|
37
|
-
const totalItems = items.length;
|
|
38
|
-
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
39
|
-
|
|
40
|
-
// Paginar dados
|
|
41
|
-
const paginatedItems = items.slice(
|
|
42
|
-
(currentPage - 1) * itemsPerPage,
|
|
43
|
-
currentPage * itemsPerPage
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
return (
|
|
47
|
-
<>
|
|
48
|
-
{/* Lista */}
|
|
49
|
-
<div className="divide-y">
|
|
50
|
-
{paginatedItems.map((item) => (
|
|
51
|
-
<div key={item.id} className="p-3">
|
|
52
|
-
{item.name}
|
|
53
|
-
</div>
|
|
54
|
-
))}
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
{/* Paginação */}
|
|
58
|
-
<CrudPrimitivePagination
|
|
59
|
-
currentPage={currentPage}
|
|
60
|
-
totalPages={totalPages}
|
|
61
|
-
totalItems={totalItems}
|
|
62
|
-
itemsPerPage={itemsPerPage}
|
|
63
|
-
onPageChange={setCurrentPage}
|
|
64
|
-
onItemsPerPageChange={(value) => {
|
|
65
|
-
setItemsPerPage(value);
|
|
66
|
-
setCurrentPage(1); // Importante: resetar página
|
|
67
|
-
}}
|
|
68
|
-
variant="full"
|
|
69
|
-
/>
|
|
70
|
-
</>
|
|
71
|
-
);
|
|
72
|
-
}`})})]})]})]}),e.jsxs(a,{id:"props",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Propriedades"})}),e.jsx(i,{children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b",children:[e.jsx("th",{className:"text-left p-2 font-medium",children:"Prop"}),e.jsx("th",{className:"text-left p-2 font-medium",children:"Tipo"}),e.jsx("th",{className:"text-left p-2 font-medium",children:"Default"}),e.jsx("th",{className:"text-left p-2 font-medium",children:"Descrição"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"currentPage"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"number"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:"Página atual (1-indexed)"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"totalPages"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"number"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:"Total de páginas"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"totalItems"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"number"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:'Total de itens (para exibir "X-Y de Z")'})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"itemsPerPage"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"number"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:"Itens por página (10, 25, 50, 100)"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"onPageChange"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"(page: number) => void"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:"Callback ao mudar página"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"onItemsPerPageChange"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"(value: number) => void"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"-"}),e.jsx("td",{className:"p-2",children:"Callback ao mudar itens por página"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2",children:e.jsx("code",{children:"variant"})}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"'full' | 'compact'"}),e.jsx("td",{className:"p-2 text-muted-foreground",children:"'full'"}),e.jsx("td",{className:"p-2",children:"Variante de exibição"})]})]})]})})})]}),e.jsxs(a,{id:"erros-comuns",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Erros Comuns"})}),e.jsxs(i,{className:"space-y-4",children:[e.jsxs("div",{className:"p-4 border rounded-lg border-destructive/50 bg-destructive/5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(T,{className:"h-4 w-4 text-destructive"}),e.jsx("h4",{className:"font-medium text-destructive",children:"❌ Paginação Manual"})]}),e.jsx("pre",{className:"bg-muted p-3 rounded text-xs overflow-x-auto",children:`// ❌ NUNCA faça isso
|
|
73
|
-
<div className="flex items-center justify-between">
|
|
74
|
-
<span>{total} itens</span>
|
|
75
|
-
<Button onClick={() => setPage(page - 1)}>
|
|
76
|
-
<ChevronLeft />
|
|
77
|
-
</Button>
|
|
78
|
-
<span>Página {page} de {pages}</span>
|
|
79
|
-
<Button onClick={() => setPage(page + 1)}>
|
|
80
|
-
<ChevronRight />
|
|
81
|
-
</Button>
|
|
82
|
-
</div>`})]}),e.jsxs("div",{className:"p-4 border rounded-lg border-green-500/50 bg-green-500/5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(A,{className:"h-4 w-4 text-green-600"}),e.jsx("h4",{className:"font-medium text-green-600",children:"✅ Use o Componente Padronizado"})]}),e.jsx("pre",{className:"bg-muted p-3 rounded text-xs overflow-x-auto",children:`// ✅ SEMPRE use o componente da lib
|
|
83
|
-
<CrudPrimitivePagination
|
|
84
|
-
currentPage={page}
|
|
85
|
-
totalPages={pages}
|
|
86
|
-
totalItems={total}
|
|
87
|
-
itemsPerPage={perPage}
|
|
88
|
-
onPageChange={setPage}
|
|
89
|
-
onItemsPerPageChange={setPerPage}
|
|
90
|
-
variant="full"
|
|
91
|
-
/>`})]}),e.jsxs("div",{className:"p-4 border rounded-lg border-destructive/50 bg-destructive/5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(T,{className:"h-4 w-4 text-destructive"}),e.jsx("h4",{className:"font-medium text-destructive",children:"❌ Não Resetar Página ao Mudar Itens"})]}),e.jsx("pre",{className:"bg-muted p-3 rounded text-xs overflow-x-auto",children:`// ❌ Pode causar página inválida
|
|
92
|
-
onItemsPerPageChange={setItemsPerPage}
|
|
93
|
-
|
|
94
|
-
// ✅ SEMPRE reset para página 1
|
|
95
|
-
onItemsPerPageChange={(value) => {
|
|
96
|
-
setItemsPerPage(value);
|
|
97
|
-
setCurrentPage(1); // Importante!
|
|
98
|
-
}}`})]})]})]}),e.jsxs(a,{id:"acessibilidade",className:"scroll-mt-4",children:[e.jsx(t,{children:e.jsx(r,{children:"Acessibilidade"})}),e.jsx(i,{children:e.jsxs("ul",{className:"list-disc list-inside space-y-2 text-sm text-muted-foreground",children:[e.jsx("li",{children:"Navegação por teclado entre botões (Tab/Shift+Tab)"}),e.jsx("li",{children:"Botões de navegação com aria-labels descritivos"}),e.jsx("li",{children:"Estados desabilitados visualmente distintos"}),e.jsx("li",{children:"Contraste adequado para texto e ícones (WCAG AA)"}),e.jsx("li",{children:"Select de itens por página acessível via teclado"}),e.jsx("li",{children:'Informação de posição clara ("X-Y de Z itens")'})]})})]}),e.jsxs(a,{children:[e.jsx(t,{children:e.jsx(r,{children:"Ver Também"})}),e.jsxs(i,{children:[e.jsx("p",{className:"text-muted-foreground mb-4",children:"Componentes relacionados:"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(f,{variant:"outline",size:"sm",onClick:()=>window.location.href="/ds/crud-bulk-action-bar",children:"BulkActionBar →"}),e.jsx(f,{variant:"outline",size:"sm",onClick:()=>window.location.href="/ds/crud-primitives",children:"CRUD Primitives →"}),e.jsx(f,{variant:"outline",size:"sm",onClick:()=>window.location.href="/ds/crud-table",children:"CrudTable →"})]})]})]})]})}export{k as CrudPaginationDoc};
|
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
import{j as e,r as n,a8 as o,a9 as i,a7 as l,h as d,a$ as s,c7 as a,B as c,ab as m,aq as p,f as u,v as g}from"./index-BtX5DZqb.js";import{C as x}from"./ComponentDocTemplate-BtOCnlM2.js";import{C as h}from"./crown-BweN5jpI.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function S(){return e.jsx(x,{title:"Places",description:"Módulo para gerenciar estruturas hierárquicas de locais integrado com a API Qualiex. Inclui visualização em árvore, gestão de acessos e componentes reutilizáveis.",installation:`import {
|
|
2
|
-
PlacesList,
|
|
3
|
-
PlaceCard,
|
|
4
|
-
ManageAccessModal,
|
|
5
|
-
placeService
|
|
6
|
-
} from 'forlogic-core';
|
|
7
|
-
|
|
8
|
-
// Tipos
|
|
9
|
-
import type {
|
|
10
|
-
Place,
|
|
11
|
-
PlacesListProps,
|
|
12
|
-
PlaceCardProps,
|
|
13
|
-
ManageAccessModalProps
|
|
14
|
-
} from 'forlogic-core';`,component:e.jsx(f,{}),usage:`// =====================
|
|
15
|
-
// BUSCAR LOCAIS
|
|
16
|
-
// =====================
|
|
17
|
-
import { placeService } from 'forlogic-core';
|
|
18
|
-
|
|
19
|
-
async function loadPlaces() {
|
|
20
|
-
const places = await placeService.getPlaces(alias, companyId);
|
|
21
|
-
// places já vem em estrutura hierárquica
|
|
22
|
-
console.log(places);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// =====================
|
|
26
|
-
// LISTA SIMPLES (SEM GESTÃO DE ACESSOS)
|
|
27
|
-
// =====================
|
|
28
|
-
import { PlacesList } from 'forlogic-core';
|
|
29
|
-
|
|
30
|
-
function MyPlacesPage() {
|
|
31
|
-
const [places, setPlaces] = useState<Place[]>([]);
|
|
32
|
-
const [isLoading, setIsLoading] = useState(true);
|
|
33
|
-
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
placeService.getPlaces(alias, companyId)
|
|
36
|
-
.then(setPlaces)
|
|
37
|
-
.finally(() => setIsLoading(false));
|
|
38
|
-
}, [alias, companyId]);
|
|
39
|
-
|
|
40
|
-
return (
|
|
41
|
-
<PlacesList
|
|
42
|
-
places={places}
|
|
43
|
-
isLoading={isLoading}
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// =====================
|
|
49
|
-
// COM GESTÃO DE ACESSOS
|
|
50
|
-
// =====================
|
|
51
|
-
import { PlacesList, PlaceCard } from 'forlogic-core';
|
|
52
|
-
|
|
53
|
-
function PlacesWithAccess() {
|
|
54
|
-
const [places, setPlaces] = useState<Place[]>([]);
|
|
55
|
-
const [managers, setManagers] = useState<Record<string, string>>({});
|
|
56
|
-
const [members, setMembers] = useState<Record<string, string[]>>({});
|
|
57
|
-
|
|
58
|
-
const manageAccessConfig = {
|
|
59
|
-
onMakeManager: async (userId, placeId) => {
|
|
60
|
-
setManagers(prev => ({ ...prev, [placeId]: userId }));
|
|
61
|
-
// Chamar API para salvar
|
|
62
|
-
},
|
|
63
|
-
onMakeMembers: async (userIds, placeId) => {
|
|
64
|
-
setMembers(prev => ({ ...prev, [placeId]: userIds }));
|
|
65
|
-
// Chamar API para salvar
|
|
66
|
-
},
|
|
67
|
-
getCurrentManagerId: (placeId) => managers[placeId],
|
|
68
|
-
getCurrentMemberIds: (placeId) => members[placeId] || []
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<PlacesList
|
|
73
|
-
places={places}
|
|
74
|
-
isLoading={false}
|
|
75
|
-
manageAccessConfig={manageAccessConfig}
|
|
76
|
-
/>
|
|
77
|
-
);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// =====================
|
|
81
|
-
// PLACECARD INDIVIDUAL
|
|
82
|
-
// =====================
|
|
83
|
-
import { PlaceCard } from 'forlogic-core';
|
|
84
|
-
|
|
85
|
-
<PlaceCard
|
|
86
|
-
place={myPlace}
|
|
87
|
-
level={0}
|
|
88
|
-
manageAccessConfig={manageAccessConfig}
|
|
89
|
-
/>`,examples:[{title:"Estrutura de Tipos",description:"Tipos principais usados no módulo de locais.",preview:e.jsx(v,{}),code:`interface Place {
|
|
90
|
-
id: string;
|
|
91
|
-
name: string;
|
|
92
|
-
usersCount?: number; // Quantidade de usuários no local
|
|
93
|
-
hasChild?: boolean; // Se tem sub-locais
|
|
94
|
-
isActive?: boolean; // Status do local
|
|
95
|
-
parentId?: string; // ID do local pai
|
|
96
|
-
parentName?: string; // Nome do local pai
|
|
97
|
-
subPlaces?: Place[]; // Sub-locais (estrutura aninhada)
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// A estrutura hierárquica é montada automaticamente
|
|
101
|
-
// pelo placeService.getPlaces()`},{title:"PlacesList",description:"Componente que renderiza a lista completa de locais com suporte a hierarquia.",preview:e.jsx(j,{}),code:`import { PlacesList } from 'forlogic-core';
|
|
102
|
-
|
|
103
|
-
function MyPlaces() {
|
|
104
|
-
const [places, setPlaces] = useState<Place[]>([]);
|
|
105
|
-
const [isLoading, setIsLoading] = useState(true);
|
|
106
|
-
|
|
107
|
-
useEffect(() => {
|
|
108
|
-
placeService.getPlaces(alias, companyId)
|
|
109
|
-
.then(setPlaces)
|
|
110
|
-
.finally(() => setIsLoading(false));
|
|
111
|
-
}, []);
|
|
112
|
-
|
|
113
|
-
return (
|
|
114
|
-
<PlacesList
|
|
115
|
-
places={places}
|
|
116
|
-
isLoading={isLoading}
|
|
117
|
-
/>
|
|
118
|
-
);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// Com gestão de acessos
|
|
122
|
-
<PlacesList
|
|
123
|
-
places={places}
|
|
124
|
-
isLoading={false}
|
|
125
|
-
manageAccessConfig={{
|
|
126
|
-
onMakeManager: handleMakeManager,
|
|
127
|
-
onMakeMembers: handleMakeMembers,
|
|
128
|
-
getCurrentManagerId: (placeId) => managers[placeId],
|
|
129
|
-
getCurrentMemberIds: (placeId) => members[placeId]
|
|
130
|
-
}}
|
|
131
|
-
/>`},{title:"PlaceCard",description:"Componente individual de local com expansão/colapso e ações.",preview:e.jsx(N,{}),code:`import { PlaceCard } from 'forlogic-core';
|
|
132
|
-
|
|
133
|
-
// Uso básico
|
|
134
|
-
<PlaceCard
|
|
135
|
-
place={{
|
|
136
|
-
id: '1',
|
|
137
|
-
name: 'Matriz',
|
|
138
|
-
usersCount: 42,
|
|
139
|
-
isActive: true,
|
|
140
|
-
subPlaces: [
|
|
141
|
-
{ id: '2', name: 'Filial SP', usersCount: 15 },
|
|
142
|
-
{ id: '3', name: 'Filial RJ', usersCount: 10 }
|
|
143
|
-
]
|
|
144
|
-
}}
|
|
145
|
-
/>
|
|
146
|
-
|
|
147
|
-
// Com nível de indentação (para sub-locais)
|
|
148
|
-
<PlaceCard
|
|
149
|
-
place={subPlace}
|
|
150
|
-
level={1} // Indentação aumenta
|
|
151
|
-
/>
|
|
152
|
-
|
|
153
|
-
// Com gestão de acessos
|
|
154
|
-
<PlaceCard
|
|
155
|
-
place={place}
|
|
156
|
-
manageAccessConfig={{
|
|
157
|
-
onMakeManager: (userId, placeId) => console.log('Gestor:', userId),
|
|
158
|
-
onMakeMembers: (userIds, placeId) => console.log('Membros:', userIds),
|
|
159
|
-
getCurrentManagerId: (placeId) => currentManager,
|
|
160
|
-
getCurrentMemberIds: (placeId) => currentMembers
|
|
161
|
-
}}
|
|
162
|
-
/>`},{title:"ManageAccessModal",description:"Modal para gerenciar gestores e membros de um local.",preview:e.jsx(I,{}),code:`import { ManageAccessModal } from 'forlogic-core';
|
|
163
|
-
|
|
164
|
-
function AccessManager() {
|
|
165
|
-
const [open, setOpen] = useState(false);
|
|
166
|
-
const [managerId, setManagerId] = useState<string>();
|
|
167
|
-
const [memberIds, setMemberIds] = useState<string[]>([]);
|
|
168
|
-
|
|
169
|
-
return (
|
|
170
|
-
<>
|
|
171
|
-
<Button onClick={() => setOpen(true)}>
|
|
172
|
-
Gerenciar Acessos
|
|
173
|
-
</Button>
|
|
174
|
-
|
|
175
|
-
<ManageAccessModal
|
|
176
|
-
open={open}
|
|
177
|
-
onOpenChange={setOpen}
|
|
178
|
-
placeId="place-123"
|
|
179
|
-
placeName="Matriz"
|
|
180
|
-
currentManagerId={managerId}
|
|
181
|
-
currentMemberIds={memberIds}
|
|
182
|
-
onMakeManager={async (userId, placeId) => {
|
|
183
|
-
setManagerId(userId);
|
|
184
|
-
// Salvar na API
|
|
185
|
-
}}
|
|
186
|
-
onMakeMembers={async (userIds, placeId) => {
|
|
187
|
-
setMemberIds(userIds);
|
|
188
|
-
// Salvar na API
|
|
189
|
-
}}
|
|
190
|
-
/>
|
|
191
|
-
</>
|
|
192
|
-
);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
// Props do ManageAccessModal:
|
|
196
|
-
// - open: boolean
|
|
197
|
-
// - onOpenChange: (open: boolean) => void
|
|
198
|
-
// - placeId: string
|
|
199
|
-
// - placeName: string
|
|
200
|
-
// - onMakeManager?: (userId, placeId) => void | Promise<void>
|
|
201
|
-
// - onMakeMembers?: (userIds[], placeId) => void | Promise<void>
|
|
202
|
-
// - currentManagerId?: string
|
|
203
|
-
// - currentMemberIds?: string[]`},{title:"placeService",description:"Serviço para buscar locais da API Qualiex.",preview:e.jsx(M,{}),code:`import { placeService } from 'forlogic-core';
|
|
204
|
-
|
|
205
|
-
// Buscar todos os locais (retorna hierarquia montada)
|
|
206
|
-
const places = await placeService.getPlaces(alias, companyId);
|
|
207
|
-
|
|
208
|
-
// O serviço:
|
|
209
|
-
// 1. Faz a chamada à API Qualiex
|
|
210
|
-
// 2. Valida e renova token automaticamente se necessário
|
|
211
|
-
// 3. Converte lista plana em hierarquia
|
|
212
|
-
// 4. Retorna Place[] com subPlaces aninhados
|
|
213
|
-
|
|
214
|
-
// Estrutura retornada:
|
|
215
|
-
[
|
|
216
|
-
{
|
|
217
|
-
id: '1',
|
|
218
|
-
name: 'Matriz',
|
|
219
|
-
usersCount: 42,
|
|
220
|
-
isActive: true,
|
|
221
|
-
subPlaces: [
|
|
222
|
-
{ id: '2', name: 'Filial SP', ... },
|
|
223
|
-
{ id: '3', name: 'Filial RJ', ... }
|
|
224
|
-
]
|
|
225
|
-
}
|
|
226
|
-
]`}],props:[{name:"PlacesList.places",type:"Place[]",description:"Lista de locais a serem exibidos (já em estrutura hierárquica)."},{name:"PlacesList.isLoading",type:"boolean",description:"Exibe skeleton de loading."},{name:"PlacesList.manageAccessConfig",type:"object",description:"Configuração para habilitar gestão de acessos."},{name:"PlaceCard.place",type:"Place",description:"Dados do local a ser renderizado."},{name:"PlaceCard.level",type:"number",default:"0",description:"Nível de indentação (0 = raiz)."},{name:"PlaceCard.manageAccessConfig",type:"object",description:"Configuração para habilitar botão de gestão de acessos."},{name:"ManageAccessModal.open",type:"boolean",description:"Controla visibilidade do modal."},{name:"ManageAccessModal.onOpenChange",type:"(open: boolean) => void",description:"Callback quando visibilidade muda."},{name:"ManageAccessModal.placeId",type:"string",description:"ID do local sendo gerenciado."},{name:"ManageAccessModal.placeName",type:"string",description:"Nome do local (exibido no título)."},{name:"ManageAccessModal.onMakeManager",type:"(userId, placeId) => void | Promise<void>",description:"Callback ao tornar usuário gestor."},{name:"ManageAccessModal.onMakeMembers",type:"(userIds[], placeId) => void | Promise<void>",description:"Callback ao tornar usuários membros."},{name:"ManageAccessModal.currentManagerId",type:"string",description:"ID do gestor atual (para destacar)."},{name:"ManageAccessModal.currentMemberIds",type:"string[]",description:"IDs dos membros atuais (para destacar)."}],accessibility:["Botões de expandir/colapsar acessíveis via teclado.","Modal segue padrões WAI-ARIA.","Checkboxes navegáveis por Tab.","Estados de loading anunciados para leitores de tela.","Busca de usuários com feedback visual."],notes:["Requer integração com API Qualiex configurada.","O placeService monta a hierarquia automaticamente.","O ManageAccessModal usa o hook useQualiexUsers internamente.","A gestão de acessos é opcional - sem manageAccessConfig, apenas exibe.","Níveis de hierarquia são controlados pela prop level no PlaceCard."]})}function f(){return e.jsxs("div",{className:"p-6 border rounded-lg bg-card space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s,{className:"h-6 w-6 text-primary"}),e.jsx("h3",{className:"text-lg font-semibold",children:"Módulo de Locais"})]}),e.jsx("p",{className:"text-muted-foreground",children:"Sistema para gerenciar estrutura hierárquica de locais:"}),e.jsxs("ul",{className:"list-disc list-inside space-y-1 text-sm",children:[e.jsx("li",{children:"Visualização em árvore expansível"}),e.jsx("li",{children:"Contagem de usuários por local"}),e.jsx("li",{children:"Status ativo/inativo"}),e.jsx("li",{children:"Gestão de gestores e membros"}),e.jsx("li",{children:"Integração com usuários Qualiex"})]})]})}function v(){return e.jsxs("div",{className:"p-4 border rounded-lg bg-muted/30 font-mono text-xs space-y-2",children:[e.jsx("div",{className:"text-primary",children:"Place"}),e.jsx("div",{className:"pl-4 text-muted-foreground",children:"id, name, usersCount, hasChild, isActive, parentId, subPlaces[]"})]})}function j(){const[r,t]=n.useState(!0);return e.jsxs("div",{className:"border rounded-lg overflow-hidden",children:[e.jsx("div",{className:"p-3 bg-muted/30 border-b",children:e.jsx("h3",{className:"text-sm font-semibold",children:"Estrutura de Locais"})}),e.jsxs("div",{className:"divide-y",children:[e.jsxs(o,{open:r,onOpenChange:t,children:[e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",children:[e.jsxs(i,{className:"flex items-center gap-2 flex-1",children:[r?e.jsx(l,{className:"h-4 w-4"}):e.jsx(d,{className:"h-4 w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Matriz"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"(2)"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"42"})]}),e.jsx(c,{children:"Ativo"})]})]}),e.jsxs(m,{children:[e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",style:{paddingLeft:"3rem"},children:[e.jsx("div",{className:"w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Filial SP"}),e.jsxs("div",{className:"ml-auto flex items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"15"})]}),e.jsx(c,{children:"Ativo"})]})]}),e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",style:{paddingLeft:"3rem"},children:[e.jsx("div",{className:"w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Filial RJ"}),e.jsxs("div",{className:"ml-auto flex items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"10"})]}),e.jsx(c,{variant:"secondary",children:"Inativo"})]})]})]})]}),e.jsx(p,{})]})]})}function N(){const[r,t]=n.useState(!1);return e.jsx("div",{className:"border rounded-lg overflow-hidden",children:e.jsxs(o,{open:r,onOpenChange:t,children:[e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",children:[e.jsxs(i,{className:"flex items-center gap-2 flex-1",children:[r?e.jsx(l,{className:"h-4 w-4"}):e.jsx(d,{className:"h-4 w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Departamento TI"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"(3)"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"25"})]}),e.jsx(c,{children:"Ativo"}),e.jsx(u,{variant:"ghost",size:"sm",children:e.jsx(g,{className:"h-4 w-4"})})]})]}),e.jsxs(m,{children:[e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",style:{paddingLeft:"3rem"},children:[e.jsx("div",{className:"w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Desenvolvimento"}),e.jsxs("div",{className:"ml-auto flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"12"})]})]}),e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",style:{paddingLeft:"3rem"},children:[e.jsx("div",{className:"w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Infraestrutura"}),e.jsxs("div",{className:"ml-auto flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"8"})]})]}),e.jsxs("div",{className:"flex items-center gap-2 py-3 px-4 hover:bg-accent/50",style:{paddingLeft:"3rem"},children:[e.jsx("div",{className:"w-4"}),e.jsx(s,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"font-medium",children:"Suporte"}),e.jsxs("div",{className:"ml-auto flex items-center gap-1.5",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"5"})]})]})]})]})})}function I(){return e.jsxs("div",{className:"p-4 border rounded-lg space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-medium",children:[e.jsx(a,{className:"h-4 w-4"}),"ManageAccessModal"]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3 text-xs",children:[e.jsxs("div",{className:"p-3 bg-muted/50 rounded-lg space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(h,{className:"h-3.5 w-3.5 text-yellow-500"}),e.jsx("span",{className:"font-medium",children:"Gestor"})]}),e.jsx("p",{className:"text-muted-foreground",children:"Selecione 1 usuário"})]}),e.jsxs("div",{className:"p-3 bg-muted/50 rounded-lg space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(a,{className:"h-3.5 w-3.5 text-primary"}),e.jsx("span",{className:"font-medium",children:"Membros"})]}),e.jsx("p",{className:"text-muted-foreground",children:"Selecione N usuários"})]})]}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Usa o hook useQualiexUsers para listar usuários disponíveis."})]})}function M(){return e.jsxs("div",{className:"p-4 border rounded-lg font-mono text-xs space-y-2",children:[e.jsx("div",{className:"text-muted-foreground",children:"// placeService"}),e.jsxs("div",{children:[e.jsx("span",{className:"text-primary",children:"getPlaces"}),e.jsx("span",{className:"text-muted-foreground",children:"(alias, companyId)"})]}),e.jsx("div",{className:"pl-4 text-muted-foreground",children:"→ Place[] (hierarquia montada)"})]})}export{S as PlacesDoc};
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import{j as e,cj as t,ck as r,f as i,cl as s,L as o,I as a}from"./index-BtX5DZqb.js";import{C as n}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function l(){return e.jsxs(t,{children:[e.jsx(r,{asChild:!0,children:e.jsx(i,{variant:"outline",children:"Abrir popover"})}),e.jsx(s,{className:"w-80",children:e.jsxs("div",{className:"grid gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h4",{className:"font-medium leading-none",children:"Dimensões"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Defina as dimensões para a camada."})]}),e.jsxs("div",{className:"grid gap-2",children:[e.jsxs("div",{className:"grid grid-cols-3 items-center gap-4",children:[e.jsx(o,{htmlFor:"width",children:"Largura"}),e.jsx(a,{id:"width",defaultValue:"100%",className:"col-span-2 h-8"})]}),e.jsxs("div",{className:"grid grid-cols-3 items-center gap-4",children:[e.jsx(o,{htmlFor:"maxWidth",children:"Máx. largura"}),e.jsx(a,{id:"maxWidth",defaultValue:"300px",className:"col-span-2 h-8"})]}),e.jsxs("div",{className:"grid grid-cols-3 items-center gap-4",children:[e.jsx(o,{htmlFor:"height",children:"Altura"}),e.jsx(a,{id:"height",defaultValue:"25px",className:"col-span-2 h-8"})]}),e.jsxs("div",{className:"grid grid-cols-3 items-center gap-4",children:[e.jsx(o,{htmlFor:"maxHeight",children:"Máx. altura"}),e.jsx(a,{id:"maxHeight",defaultValue:"none",className:"col-span-2 h-8"})]})]})]})})]})}function d(){return e.jsxs(t,{children:[e.jsx(r,{asChild:!0,children:e.jsx(i,{variant:"outline",children:"Abrir"})}),e.jsx(s,{children:e.jsx("p",{className:"text-sm",children:"Conteúdo simples do popover."})})]})}const c=`import {
|
|
2
|
-
Popover,
|
|
3
|
-
PopoverContent,
|
|
4
|
-
PopoverTrigger,
|
|
5
|
-
Button,
|
|
6
|
-
Input,
|
|
7
|
-
Label
|
|
8
|
-
} from 'forlogic-core';
|
|
9
|
-
|
|
10
|
-
function DimensionsPopover() {
|
|
11
|
-
return (
|
|
12
|
-
<Popover>
|
|
13
|
-
<PopoverTrigger asChild>
|
|
14
|
-
<Button variant="outline">Abrir popover</Button>
|
|
15
|
-
</PopoverTrigger>
|
|
16
|
-
<PopoverContent className="w-80">
|
|
17
|
-
<div className="grid gap-4">
|
|
18
|
-
<div className="space-y-2">
|
|
19
|
-
<h4 className="font-medium leading-none">Dimensões</h4>
|
|
20
|
-
<p className="text-sm text-muted-foreground">
|
|
21
|
-
Defina as dimensões para a camada.
|
|
22
|
-
</p>
|
|
23
|
-
</div>
|
|
24
|
-
<div className="grid gap-2">
|
|
25
|
-
<div className="grid grid-cols-3 items-center gap-4">
|
|
26
|
-
<Label htmlFor="width">Largura</Label>
|
|
27
|
-
<Input id="width" defaultValue="100%" className="col-span-2 h-8" />
|
|
28
|
-
</div>
|
|
29
|
-
<div className="grid grid-cols-3 items-center gap-4">
|
|
30
|
-
<Label htmlFor="maxWidth">Máx. largura</Label>
|
|
31
|
-
<Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
|
|
32
|
-
</div>
|
|
33
|
-
<div className="grid grid-cols-3 items-center gap-4">
|
|
34
|
-
<Label htmlFor="height">Altura</Label>
|
|
35
|
-
<Input id="height" defaultValue="25px" className="col-span-2 h-8" />
|
|
36
|
-
</div>
|
|
37
|
-
<div className="grid grid-cols-3 items-center gap-4">
|
|
38
|
-
<Label htmlFor="maxHeight">Máx. altura</Label>
|
|
39
|
-
<Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
</PopoverContent>
|
|
44
|
-
</Popover>
|
|
45
|
-
);
|
|
46
|
-
}`,p=`import {
|
|
47
|
-
Popover,
|
|
48
|
-
PopoverContent,
|
|
49
|
-
PopoverTrigger,
|
|
50
|
-
Button
|
|
51
|
-
} from 'forlogic-core';
|
|
52
|
-
|
|
53
|
-
function BasicPopover() {
|
|
54
|
-
return (
|
|
55
|
-
<Popover>
|
|
56
|
-
<PopoverTrigger asChild>
|
|
57
|
-
<Button variant="outline">Abrir</Button>
|
|
58
|
-
</PopoverTrigger>
|
|
59
|
-
<PopoverContent>
|
|
60
|
-
<p className="text-sm">Conteúdo simples do popover.</p>
|
|
61
|
-
</PopoverContent>
|
|
62
|
-
</Popover>
|
|
63
|
-
);
|
|
64
|
-
}`;function v(){return e.jsx(n,{title:"Popover",description:"Exibe conteúdo rico em um portal, acionado por um botão.",component:e.jsx(l,{}),usage:c,examples:[{title:"Uso Básico",description:"Popover simples com conteúdo de texto.",preview:e.jsx(d,{}),code:p}],props:[{name:"defaultOpen",type:"boolean",default:"false",description:"Estado aberto inicial (não controlado)."},{name:"open",type:"boolean",default:"-",description:"Estado aberto controlado."},{name:"onOpenChange",type:"(open: boolean) => void",default:"-",description:"Callback quando o estado muda."},{name:"modal",type:"boolean",default:"false",description:"Define comportamento modal (bloqueia interação externa)."},{name:"asChild (Trigger)",type:"boolean",default:"false",description:"Mescla props com o elemento filho."},{name:"side",type:'"top" | "right" | "bottom" | "left"',default:'"bottom"',description:"Lado preferido de posicionamento."},{name:"sideOffset",type:"number",default:"4",description:"Distância em pixels do trigger."},{name:"align",type:'"start" | "center" | "end"',default:'"center"',description:"Alinhamento em relação ao trigger."},{name:"alignOffset",type:"number",default:"0",description:"Deslocamento do alinhamento em pixels."},{name:"avoidCollisions",type:"boolean",default:"true",description:"Evita colisões com bordas da viewport."},{name:"collisionPadding",type:"number | Padding",default:"0",description:"Espaçamento da borda de colisão."},{name:"sticky",type:'"partial" | "always"',default:'"partial"',description:"Comportamento de aderência durante scroll."},{name:"hideWhenDetached",type:"boolean",default:"false",description:"Oculta quando desconectado do trigger."},{name:"container",type:"HTMLElement | null",default:"document.body",description:"Container do portal."}],accessibility:["Segue o padrão WAI-ARIA Dialog (non-modal).","Enter/Space: Abre/fecha o popover quando o trigger está focado.","Escape: Fecha o popover e retorna o foco ao trigger.","Tab: Navega entre elementos focáveis dentro do popover.","Foco é automaticamente movido para o conteúdo ao abrir.","Foco retorna ao trigger ao fechar.","Atributos ARIA: aria-expanded, aria-haspopup.","Data attributes: [data-state], [data-side], [data-align]."],notes:["Use Popover para exibir conteúdo rico como formulários, detalhes ou ações secundárias.","Prefira Dialog para conteúdo que requer atenção total do usuário.","O prop asChild permite usar qualquer elemento como trigger.","Combine com formulários para edição inline de campos."]})}export{v as PopoverDoc};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import{j as e,ap as s}from"./index-BtX5DZqb.js";import{C as a}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function l(){return e.jsx(a,{title:"Progress",description:"Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicamente exibido como uma barra de progresso.",component:e.jsx(s,{value:60,className:"w-[60%]"}),usage:`import { Progress } from "forlogic-core"
|
|
2
|
-
|
|
3
|
-
<Progress value={60} />`,examples:[{title:"Default",description:"Barra de progresso com valor definido.",preview:e.jsx(s,{value:60,className:"w-[60%]"}),code:"<Progress value={60} />"},{title:"Valores Variados",description:"Progresso em diferentes estágios de conclusão.",preview:e.jsxs("div",{className:"space-y-4 w-[60%]",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"25% concluído"}),e.jsx(s,{value:25})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"50% concluído"}),e.jsx(s,{value:50})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"75% concluído"}),e.jsx(s,{value:75})]})]}),code:`<div className="space-y-1">
|
|
4
|
-
<span className="text-sm">25% concluído</span>
|
|
5
|
-
<Progress value={25} />
|
|
6
|
-
</div>`},{title:"Completo",description:"Estado de progresso 100% concluído.",preview:e.jsxs("div",{className:"space-y-1 w-[60%]",children:[e.jsxs("div",{className:"flex justify-between text-sm",children:[e.jsx("span",{children:"Download concluído"}),e.jsx("span",{className:"text-muted-foreground",children:"100%"})]}),e.jsx(s,{value:100})]}),code:`<div className="space-y-1">
|
|
7
|
-
<div className="flex justify-between text-sm">
|
|
8
|
-
<span>Download concluído</span>
|
|
9
|
-
<span>100%</span>
|
|
10
|
-
</div>
|
|
11
|
-
<Progress value={100} />
|
|
12
|
-
</div>`},{title:"Upload de Arquivo",description:"Exemplo de uso em upload com percentual.",preview:e.jsxs("div",{className:"space-y-2 w-[60%] p-4 border rounded-lg",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("p",{className:"text-sm font-medium",children:"documento.pdf"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"2.4 MB de 4.8 MB"})]}),e.jsx("span",{className:"text-sm font-medium",children:"50%"})]}),e.jsx(s,{value:50})]}),code:`<div className="space-y-2 p-4 border rounded-lg">
|
|
13
|
-
<div className="flex items-center gap-2">
|
|
14
|
-
<div className="flex-1">
|
|
15
|
-
<p className="text-sm font-medium">documento.pdf</p>
|
|
16
|
-
<p className="text-xs text-muted-foreground">2.4 MB de 4.8 MB</p>
|
|
17
|
-
</div>
|
|
18
|
-
<span className="text-sm font-medium">50%</span>
|
|
19
|
-
</div>
|
|
20
|
-
<Progress value={50} />
|
|
21
|
-
</div>`},{title:"Progresso de Etapas",description:"Indicando progresso em um wizard ou processo multi-etapas.",preview:e.jsxs("div",{className:"space-y-2 w-[60%]",children:[e.jsxs("div",{className:"flex justify-between text-sm",children:[e.jsx("span",{children:"Etapa 2 de 5"}),e.jsx("span",{className:"text-muted-foreground",children:"40%"})]}),e.jsx(s,{value:40}),e.jsxs("div",{className:"flex justify-between text-xs text-muted-foreground",children:[e.jsx("span",{children:"Dados pessoais"}),e.jsx("span",{children:"Endereço"}),e.jsx("span",{children:"Pagamento"}),e.jsx("span",{children:"Revisão"}),e.jsx("span",{children:"Confirmação"})]})]}),code:`<div className="space-y-2">
|
|
22
|
-
<div className="flex justify-between text-sm">
|
|
23
|
-
<span>Etapa 2 de 5</span>
|
|
24
|
-
<span>40%</span>
|
|
25
|
-
</div>
|
|
26
|
-
<Progress value={40} />
|
|
27
|
-
</div>`},{title:"Tamanhos",description:"Progress bar com diferentes alturas via className.",preview:e.jsxs("div",{className:"space-y-4 w-[60%]",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Pequeno (h-1)"}),e.jsx(s,{value:60,className:"h-1"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Padrão (h-2)"}),e.jsx(s,{value:60,className:"h-2"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Grande (h-4)"}),e.jsx(s,{value:60,className:"h-4"})]})]}),code:`<Progress value={60} className="h-1" /> {/* Pequeno */}
|
|
28
|
-
<Progress value={60} className="h-2" /> {/* Padrão */}
|
|
29
|
-
<Progress value={60} className="h-4" /> {/* Grande */}`}],props:[{name:"value",type:"number",default:"0",description:"O valor de progresso (0-100)."},{name:"max",type:"number",default:"100",description:"O valor máximo de progresso."},{name:"getValueLabel",type:"(value: number, max: number) => string",default:"-",description:"Função para gerar label acessível."},{name:"className",type:"string",default:"-",description:"Classes CSS para estilização."}],accessibility:['Usa atributos ARIA apropriados (role="progressbar")',"Anuncia o progresso para leitores de tela via aria-valuenow","aria-valuemin e aria-valuemax definidos automaticamente","Use getValueLabel para descrições customizadas","Indicador visual claro para estado de progresso"],notes:["Use Progress para indicar conclusão de tarefas de longa duração","Combine com textos descritivos para fornecer contexto adicional","Prefira Spinner para loading de curta duração ou indeterminado","Ajuste a altura via className (h-1, h-2, h-4) para diferentes contextos","Para uploads, mostre tamanho atual e total junto com o percentual"]})}export{l as ProgressDoc};
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import{j as e,r,ey as i,B as u,c7 as c,dS as m,dT as p,f as x,dU as g,dV as f,dW as h}from"./index-BtX5DZqb.js";import{C as v}from"./ComponentDocTemplate-BtOCnlM2.js";import{U}from"./user-check-CrbWcnPN.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function I(){const[s,a]=r.useState("");return e.jsxs("div",{className:"w-[300px]",children:[e.jsx(i,{value:s,onChange:o=>a(o),placeholder:"Selecione um usuário..."}),s&&e.jsxs("p",{className:"mt-2 text-sm text-muted-foreground",children:["ID selecionado: ",e.jsx(u,{variant:"secondary",children:s})]})]})}function b(){const[s,a]=r.useState("");return e.jsx("div",{className:"w-[300px]",children:e.jsx(i,{label:"Responsável",required:!0,value:s,onChange:o=>a(o),placeholder:"Selecione o responsável...",icon:U})})}function y(){const[s,a]=r.useState([]);return e.jsxs("div",{className:"w-[350px]",children:[e.jsx(i,{multiple:!0,label:"Avaliadores",required:!0,value:s,onChange:o=>a(o),placeholder:"Selecione os avaliadores...",icon:c,maxDisplayedBadges:3}),s.length>0&&e.jsxs("p",{className:"mt-2 text-sm text-muted-foreground",children:[s.length," usuário(s) selecionado(s)"]})]})}function j(){const[s,a]=r.useState(""),[o,n]=r.useState(""),[t,d]=r.useState("");return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"w-[300px]",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground mb-2",children:"Formato: name (padrão)"}),e.jsx(i,{displayFormat:"name",value:s,onChange:l=>a(l),placeholder:"Apenas nome..."})]}),e.jsxs("div",{className:"w-[350px]",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground mb-2",children:"Formato: name-email"}),e.jsx(i,{displayFormat:"name-email",value:o,onChange:l=>n(l),placeholder:"Nome e email..."})]}),e.jsxs("div",{className:"w-[300px]",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground mb-2",children:"Formato: name-role"}),e.jsx(i,{displayFormat:"name-role",value:t,onChange:l=>d(l),placeholder:"Nome e cargo..."})]})]})}function C(){const[s,a]=r.useState(!1),[o,n]=r.useState(""),t=r.useRef(null);return e.jsxs(m,{open:s,onOpenChange:a,children:[e.jsx(p,{asChild:!0,children:e.jsx(x,{variant:"outline",children:"Abrir Dialog com QualiexUserField"})}),e.jsxs(g,{ref:t,className:"max-h-[90vh] overflow-visible",children:[e.jsx(f,{children:e.jsx(h,{children:"Selecionar Usuário"})}),e.jsxs("div",{className:"mt-4 max-h-[60vh] overflow-auto pr-1",children:[e.jsx(i,{label:"Responsável",required:!0,value:o,onChange:d=>n(d),placeholder:"Selecione...",popoverContainer:t.current}),e.jsxs("p",{className:"mt-4 text-sm text-muted-foreground",children:["O ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"popoverContainer"}),"garante que o dropdown funcione corretamente dentro do Dialog."]})]})]})]})}function E(){return e.jsx(v,{title:"QualiexUserField",description:"Campo de seleção de usuários integrado com a API Qualiex. Suporta seleção única ou múltipla, display customizado, filtros e funciona perfeitamente dentro de Dialogs.",component:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Uso básico"}),e.jsx(I,{})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Com label e ícone"}),e.jsx(b,{})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Seleção múltipla"}),e.jsx(y,{})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Formatos de exibição"}),e.jsx(j,{})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Uso em Dialog"}),e.jsx(C,{})]})]}),usage:`import { QualiexUserField } from "forlogic-core"
|
|
2
|
-
|
|
3
|
-
// =====================
|
|
4
|
-
// USO BÁSICO
|
|
5
|
-
// =====================
|
|
6
|
-
<QualiexUserField
|
|
7
|
-
value={userId}
|
|
8
|
-
onChange={setUserId}
|
|
9
|
-
placeholder="Selecione..."
|
|
10
|
-
/>
|
|
11
|
-
|
|
12
|
-
// =====================
|
|
13
|
-
// COM LABEL E REQUIRED
|
|
14
|
-
// =====================
|
|
15
|
-
import { UserCheck } from "lucide-react"
|
|
16
|
-
|
|
17
|
-
<QualiexUserField
|
|
18
|
-
label="Responsável"
|
|
19
|
-
required
|
|
20
|
-
icon={UserCheck}
|
|
21
|
-
value={userId}
|
|
22
|
-
onChange={setUserId}
|
|
23
|
-
/>
|
|
24
|
-
|
|
25
|
-
// =====================
|
|
26
|
-
// SELEÇÃO MÚLTIPLA
|
|
27
|
-
// =====================
|
|
28
|
-
const [userIds, setUserIds] = useState<string[]>([])
|
|
29
|
-
|
|
30
|
-
<QualiexUserField
|
|
31
|
-
multiple
|
|
32
|
-
label="Avaliadores"
|
|
33
|
-
required
|
|
34
|
-
value={userIds}
|
|
35
|
-
onChange={setUserIds}
|
|
36
|
-
maxDisplayedBadges={3}
|
|
37
|
-
/>
|
|
38
|
-
|
|
39
|
-
// =====================
|
|
40
|
-
// DISPLAY CUSTOMIZADO
|
|
41
|
-
// =====================
|
|
42
|
-
|
|
43
|
-
// Exibir nome + email
|
|
44
|
-
<QualiexUserField
|
|
45
|
-
displayFormat="name-email"
|
|
46
|
-
value={userId}
|
|
47
|
-
onChange={setUserId}
|
|
48
|
-
/>
|
|
49
|
-
|
|
50
|
-
// Exibir nome + cargo
|
|
51
|
-
<QualiexUserField
|
|
52
|
-
displayFormat="name-role"
|
|
53
|
-
value={userId}
|
|
54
|
-
onChange={setUserId}
|
|
55
|
-
/>
|
|
56
|
-
|
|
57
|
-
// Custom display function
|
|
58
|
-
<QualiexUserField
|
|
59
|
-
displayFormat="custom"
|
|
60
|
-
customDisplayFn={(user) => \`\${user.userName} - \${user.placeName || 'Sem local'}\`}
|
|
61
|
-
value={userId}
|
|
62
|
-
onChange={setUserId}
|
|
63
|
-
/>
|
|
64
|
-
|
|
65
|
-
// =====================
|
|
66
|
-
// FILTRO DE USUÁRIOS
|
|
67
|
-
// =====================
|
|
68
|
-
|
|
69
|
-
// Apenas admins
|
|
70
|
-
<QualiexUserField
|
|
71
|
-
filterFn={(user) => user.roleName === 'Admin'}
|
|
72
|
-
value={userId}
|
|
73
|
-
onChange={setUserId}
|
|
74
|
-
/>
|
|
75
|
-
|
|
76
|
-
// Excluir usuário atual
|
|
77
|
-
<QualiexUserField
|
|
78
|
-
filterFn={(user) => user.userId !== currentUserId}
|
|
79
|
-
value={userId}
|
|
80
|
-
onChange={setUserId}
|
|
81
|
-
/>
|
|
82
|
-
|
|
83
|
-
// =====================
|
|
84
|
-
// USO EM DIALOG/MODAL
|
|
85
|
-
// =====================
|
|
86
|
-
import { useRef } from "react"
|
|
87
|
-
import { Dialog, DialogContent, DialogTrigger } from "forlogic-core"
|
|
88
|
-
|
|
89
|
-
function MyDialog() {
|
|
90
|
-
const dialogRef = useRef<HTMLDivElement>(null)
|
|
91
|
-
const [userId, setUserId] = useState('')
|
|
92
|
-
|
|
93
|
-
return (
|
|
94
|
-
<Dialog>
|
|
95
|
-
<DialogTrigger asChild>
|
|
96
|
-
<Button>Abrir</Button>
|
|
97
|
-
</DialogTrigger>
|
|
98
|
-
<DialogContent ref={dialogRef} className="overflow-visible">
|
|
99
|
-
<QualiexUserField
|
|
100
|
-
value={userId}
|
|
101
|
-
onChange={setUserId}
|
|
102
|
-
popoverContainer={dialogRef.current}
|
|
103
|
-
/>
|
|
104
|
-
</DialogContent>
|
|
105
|
-
</Dialog>
|
|
106
|
-
)
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// =====================
|
|
110
|
-
// USO EM BASEFORM (type: user-select)
|
|
111
|
-
// =====================
|
|
112
|
-
const fields: FormField[] = [
|
|
113
|
-
{
|
|
114
|
-
name: 'responsible_id',
|
|
115
|
-
label: 'Responsável',
|
|
116
|
-
type: 'user-select',
|
|
117
|
-
required: true,
|
|
118
|
-
placeholder: 'Selecione o responsável...'
|
|
119
|
-
}
|
|
120
|
-
]
|
|
121
|
-
|
|
122
|
-
// =====================
|
|
123
|
-
// HOOK useQualiexUsers
|
|
124
|
-
// =====================
|
|
125
|
-
// O QualiexUserField usa internamente o hook useQualiexUsers
|
|
126
|
-
|
|
127
|
-
import { useQualiexUsers } from "forlogic-core"
|
|
128
|
-
|
|
129
|
-
// Busca automática (padrão)
|
|
130
|
-
const { data: users, isLoading, error } = useQualiexUsers()
|
|
131
|
-
|
|
132
|
-
// Busca condicional (ex: quando modal abre)
|
|
133
|
-
const { data: users } = useQualiexUsers({ enabled: isModalOpen })
|
|
134
|
-
|
|
135
|
-
// Lazy loading com refetch manual
|
|
136
|
-
const { data: users, refetch } = useQualiexUsers({ enabled: false })
|
|
137
|
-
await refetch() // Chama quando necessário
|
|
138
|
-
|
|
139
|
-
// Tipo QualiexUser retornado:
|
|
140
|
-
interface QualiexUser {
|
|
141
|
-
userId: string
|
|
142
|
-
userName: string
|
|
143
|
-
userEmail: string
|
|
144
|
-
roleName?: string
|
|
145
|
-
roleId?: string
|
|
146
|
-
placeName?: string
|
|
147
|
-
placeId?: string
|
|
148
|
-
isActive?: boolean
|
|
149
|
-
}`,props:[{name:"value",type:"string | string[]",default:"''",description:"ID(s) do(s) usuário(s) selecionado(s)."},{name:"onChange",type:"(value: string | string[]) => void",default:"-",description:"Callback quando seleção muda."},{name:"multiple",type:"boolean",default:"false",description:"Habilita seleção múltipla."},{name:"label",type:"string",default:"-",description:"Label do campo."},{name:"required",type:"boolean",default:"false",description:"Adiciona asterisco ao label."},{name:"placeholder",type:"string",default:'t("search_placeholder")',description:"Placeholder quando vazio."},{name:"icon",type:"LucideIcon",default:"-",description:"Ícone exibido no campo."},{name:"disabled",type:"boolean",default:"false",description:"Desabilita o campo."},{name:"enabled",type:"boolean",default:"true",description:"Controla se o hook busca dados da API."},{name:"displayFormat",type:"'name' | 'name-email' | 'name-role' | 'custom'",default:"'name'",description:"Formato de exibição do usuário."},{name:"customDisplayFn",type:"(user: QualiexUser) => string",default:"-",description:'Função customizada de exibição (requer displayFormat="custom").'},{name:"filterFn",type:"(user: QualiexUser) => boolean",default:"-",description:"Função para filtrar usuários."},{name:"maxDisplayedBadges",type:"number",default:"-",description:"Limite de badges no modo múltiplo."},{name:"sortOptions",type:"boolean",default:"true",description:"Ordena usuários alfabeticamente."},{name:"popoverContainer",type:"HTMLElement | null",default:"-",description:"Container para portal (útil em Dialog)."},{name:"onOpen",type:"() => void",default:"-",description:"Callback ao abrir o popover."},{name:"onClose",type:"() => void",default:"-",description:"Callback ao fechar o popover."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais."}],accessibility:["Navegação completa por teclado","Busca inteligente (sem acentos, case-insensitive)","Segue padrão WAI-ARIA combobox","Badges removíveis com teclado (modo múltiplo)","Estados de loading e erro acessíveis","Labels associados corretamente"],notes:["Requer configuração Qualiex (apiUrl e apiToken) no projeto","Use enabled={false} para lazy loading e chame refetch() manualmente","Em Dialogs, sempre passe popoverContainer para evitar problemas de z-index","O hook useQualiexUsers é usado internamente para buscar os usuários",'Integrado automaticamente com BaseForm via type="user-select"']})}export{E as QualiexUserFieldDoc};
|