forlogic-core 2.0.0 → 2.0.1
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 +0 -46
- package/dist/assets/AccordionDoc-CGNlubG3.js +31 -0
- package/dist/assets/ActionButtonDoc-CYtkXR0k.js +47 -0
- package/dist/assets/ActionPlanDoc-BSuPRftQ.js +65 -0
- package/dist/assets/AlertDoc-Cpvxneqg.js +37 -0
- package/dist/assets/AliasUrlDoc-DIpUWf4Y.js +189 -0
- package/dist/assets/AppHeaderDoc-DNQErj_t.js +74 -0
- package/dist/assets/AppSidebarDoc-DkeQarDu.js +221 -0
- package/dist/assets/ApprovalFlowDoc-8YgXbhKJ.js +31 -0
- package/dist/assets/AuditLogDoc-BBvNcHIo.js +67 -0
- package/dist/assets/AuditTrailDoc-DgFHO-uo.js +17 -0
- package/dist/assets/AuthDoc-WIA_Aetl.js +200 -0
- package/dist/assets/AvatarDoc-B6go1C1T.js +11 -0
- package/dist/assets/BadgeDoc-BONhfqB_.js +36 -0
- package/dist/assets/BaseFormDoc-CuyUArcj.js +169 -0
- package/dist/assets/BodyContentDoc-CterHC1E.js +83 -0
- package/dist/assets/BreadcrumbDoc-Dwn9nLeO.js +75 -0
- package/dist/assets/ButtonDoc-BOjRseZT.js +41 -0
- package/dist/assets/ButtonGroupDoc-8IS6PPh4.js +7 -0
- package/dist/assets/CalendarDoc-CMwIEqgT.js +81 -0
- package/dist/assets/CardDoc-BZz1CVg2.js +49 -0
- package/dist/assets/ChartDoc-B5vZVtqD.js +76 -0
- package/dist/assets/CheckboxDoc-lAbYO9I5.js +55 -0
- package/dist/assets/ColorPickerDoc-Dpsprp4N.js +10 -0
- package/dist/assets/ColorsFoundationDoc-CCHeSL3p.js +13 -0
- package/dist/assets/ComboTreeDoc-D4dTkIt-.js +46 -0
- package/dist/assets/ComboboxDoc-CqqZPvZq.js +134 -0
- package/dist/assets/ComponentDocTemplate-CQbBhfvZ.js +1 -0
- package/dist/assets/ContextMenuDoc-D3jC-MVA.js +182 -0
- package/dist/assets/ContextsDoc-XFH0-JdS.js +211 -0
- package/dist/assets/CreateCrudPageDoc-CpuiWI-g.js +106 -0
- package/dist/assets/CrudActionBarDoc-wuBGXD9Y.js +112 -0
- package/dist/assets/CrudGridDoc-BYWqSXBH.js +85 -0
- package/dist/assets/CrudOverviewDoc-B_bk2a2t.js +14 -0
- package/dist/assets/CrudPrimitivesDoc-CxaTB94A.js +164 -0
- package/dist/assets/CrudTableDoc-Dga1VgCu.js +113 -0
- package/dist/assets/CustomFormFieldsDoc-C1hwwSl3.js +33 -0
- package/dist/assets/DashboardFormDoc-BUDCmrMl.js +49 -0
- package/dist/assets/DashboardGeneralViewDoc-Cyg1SIiG.js +71 -0
- package/dist/assets/DashboardGridDoc-BavePiRF.js +49 -0
- package/dist/assets/DashboardListDoc-CLyMA6UK.js +37 -0
- package/dist/assets/DashboardOverviewDoc-DRVvNIF1.js +35 -0
- package/dist/assets/DashboardPanelRendererDoc--mfwb8Nc.js +60 -0
- package/dist/assets/DashboardPanelsBasicDoc-BQ2V_52D.js +62 -0
- package/dist/assets/DashboardPanelsCartesianDoc-sy-hcVQY.js +75 -0
- package/dist/assets/DashboardPanelsSpecialDoc-DsIUCRRP.js +83 -0
- package/dist/assets/DashboardViewDoc-CtlCNlEF.js +45 -0
- package/dist/assets/DataListDoc-DUy88lCQ.js +13 -0
- package/dist/assets/DesignSystemHome-DHl9YtbH.js +1 -0
- package/dist/assets/DialogDoc-CMQqnTV-.js +981 -0
- package/dist/assets/DropdownMenuDoc-S7X9csGt.js +175 -0
- package/dist/assets/ElectronicSignatureDialogDoc-BfithaL_.js +57 -0
- package/dist/assets/EmptyStateDoc-CHGCiGIk.js +35 -0
- package/dist/assets/EnvironmentsDoc-DZHJZ2nm.js +96 -0
- package/dist/assets/ErrorBoundaryDoc-DoaAg68p.js +111 -0
- package/dist/assets/ExampleActionPlanPage-C0fIMZCD.js +1 -0
- package/dist/assets/ExampleAppDoc-DzIU81Fn.js +1 -0
- package/dist/assets/ExampleCard-DuLrb3t-.js +1 -0
- package/dist/assets/ExampleCrudReportsPage-M0pz6tdM.js +1 -0
- package/dist/assets/ExampleDashboardPage-CRG5r3Vw.js +1 -0
- package/dist/assets/ExampleIdeasPage-I84ZMLY4.js +1 -0
- package/dist/assets/ExampleImportWizardPage-h4YqrrSe.js +1 -0
- package/dist/assets/ExampleSettingsPage-CwdWqoaP.js +1 -0
- package/dist/assets/FileUploadDoc-9-UujFNX.js +34 -0
- package/dist/assets/FilterBar-DDTqqUfZ.js +1 -0
- package/dist/assets/FormDoc-CVES6n3d.js +81 -0
- package/dist/assets/FoundationOverview-DT0u11Gz.js +1 -0
- package/dist/assets/GridDoc-CbHFSILF.js +28 -0
- package/dist/assets/HooksDoc-Ctxdk6Wq.js +665 -0
- package/dist/assets/HoverCardDoc-8Wkaafdj.js +31 -0
- package/dist/assets/I18nDoc-D3Q2m7ik.js +167 -0
- package/dist/assets/IconPickerDoc-DZ26Gdpg.js +10 -0
- package/dist/assets/IconsFoundationDoc-xOxtC7CW.js +33 -0
- package/dist/assets/InputDoc-BhztAiuJ.js +211 -0
- package/dist/assets/LabelDoc-A4hmTRRV.js +42 -0
- package/dist/assets/LeadershipDoc-CqOSfWsP.js +452 -0
- package/dist/assets/MediaDoc-C78gvC8p.js +459 -0
- package/dist/assets/MenubarDoc-DCnmd2tO.js +165 -0
- package/dist/assets/ModuleAccessDoc-CmD5nHDp.js +153 -0
- package/dist/assets/ModulesDialogDoc-DVit1CA-.js +46 -0
- package/dist/assets/MultiselectPermissionsDoc-tlJMs04L.js +34 -0
- package/dist/assets/NavigationMenuDoc-q1fbc89j.js +116 -0
- package/dist/assets/OnboardingDialogDoc-3A3eBYrq.js +55 -0
- package/dist/assets/PaginationDoc-B8-bMz5J.js +27 -0
- package/dist/assets/PaginationDoc-BkGdxHL3.js +98 -0
- package/dist/assets/PlacesDoc-CKPO6ATs.js +226 -0
- package/dist/assets/PopoverDoc-CJPU4Ags.js +64 -0
- package/dist/assets/ProgressDoc-CpjbTL4o.js +29 -0
- package/dist/assets/QualiexUserFieldDoc-DDwumlRw.js +149 -0
- package/dist/assets/RadioGroupDoc-D6tSZz8G.js +57 -0
- package/dist/assets/RadiusDoc-B4xSnajw.js +7 -0
- package/dist/assets/ReportRequestListDoc-C0LIaU8P.js +15 -0
- package/dist/assets/RequiredFieldsCounterDoc-COesoSdx.js +58 -0
- package/dist/assets/ResizableDoc-CW0-XQuB.js +104 -0
- package/dist/assets/RichTextEditorDoc-C8c_XA9P.js +24 -0
- package/dist/assets/ScrollAreaDoc-BxtoAPaZ.js +28 -0
- package/dist/assets/SecurityDoc-wOVqpg2F.js +204 -0
- package/dist/assets/SelectDoc-C75gtY9D.js +80 -0
- package/dist/assets/SeparatorDoc-BjQBPB1P.js +4 -0
- package/dist/assets/ServicesDoc-CXTctwBl.js +308 -0
- package/dist/assets/ShadowsDoc-C6Lw8_x2.js +9 -0
- package/dist/assets/SignDoc-Bh5ZUg5x.js +66 -0
- package/dist/assets/SkeletonDoc-rTLGK5VE.js +54 -0
- package/dist/assets/SliderDoc-JMAMDub7.js +41 -0
- package/dist/assets/SpacingDoc-RljOrpwA.js +12 -0
- package/dist/assets/SplitButtonDoc-CvShUW3w.js +53 -0
- package/dist/assets/StepSelectorDoc-C-nAap9H.js +41 -0
- package/dist/assets/SwitchDoc-DLnqmkPr.js +56 -0
- package/dist/assets/TableDoc-B8EpWLVg.js +128 -0
- package/dist/assets/TabsDoc-DIBtl_uC.js +42 -0
- package/dist/assets/TeamSelectorDoc-B7OnCbL7.js +10 -0
- package/dist/assets/TermsOfUseDoc-Bb-pw08s.js +16 -0
- package/dist/assets/TextareaDoc-DGnqMqEC.js +46 -0
- package/dist/assets/ToastDoc-DjYyc7ae.js +157 -0
- package/dist/assets/ToggleDoc-C9ZOVjkY.js +51 -0
- package/dist/assets/TooltipDoc-BEx4l9-i.js +58 -0
- package/dist/assets/TruncatedCellDoc-BbV1bRSY.js +12 -0
- package/dist/assets/TypographyFoundationDoc-CUDYjRo9.js +7 -0
- package/dist/assets/UpdatesNotificationDoc-7nyjzLMJ.js +29 -0
- package/dist/assets/UsersGroupsSelectorDoc-C0KlTAL5.js +18 -0
- package/dist/assets/UtilitiesDoc-DGxaHVV1.js +145 -0
- package/dist/assets/ViewerDialogsDoc-CnTPTEz0.js +1 -0
- package/dist/assets/blocks-B6LrJeAM.js +1 -0
- package/dist/assets/building-DeVappnD.js +1 -0
- package/dist/assets/calendar-days-BQ0na5kM.js +1 -0
- package/dist/assets/check-check-C_-PJCJa.js +1 -0
- package/dist/assets/circle-plus-CpIcep-O.js +1 -0
- package/dist/assets/circle-x-jPpBPew0.js +1 -0
- package/dist/assets/clipboard-list-CXNPdciZ.js +1 -0
- package/dist/assets/cloud-upload-BEjzumjl.js +1 -0
- package/dist/assets/crown-CqNsQIsm.js +1 -0
- package/dist/assets/date-picker-BW3eGOe_.js +1 -0
- package/dist/assets/disabled-menu-item-C2YaMvSt.js +1 -0
- package/dist/assets/drawer-D5rflIcD.js +3 -0
- package/dist/assets/file-braces-DFb5X9so.js +1 -0
- package/dist/assets/file-pen-line-CyUGKkEN.js +1 -0
- package/dist/assets/git-branch-BcXv9mpp.js +1 -0
- package/dist/assets/globe-CpMIWAcv.js +1 -0
- package/dist/assets/hash-cQWdKjya.js +1 -0
- package/dist/assets/hourglass-BahQ3eDv.js +1 -0
- package/dist/assets/hover-card-R66N85sZ.js +1 -0
- package/dist/assets/iframe-dialog-V0mW5aBb.js +1 -0
- package/dist/assets/index-DkiftrvI.js +352 -0
- package/dist/assets/index-nmBjO9Th.css +1 -0
- package/dist/assets/life-buoy-ByXiPddz.js +1 -0
- package/dist/assets/loading-state-Cb5_t5uE.js +1 -0
- package/dist/assets/lucide-react-Cp3Yw3Zm.js +1 -0
- package/dist/assets/package-B3-pVvPM.js +1 -0
- package/dist/assets/pen-Bi_lmmKT.js +1 -0
- package/dist/assets/pin-DVsSl8QA.js +1 -0
- package/dist/assets/printer-BnJ8B6m-.js +1 -0
- package/dist/assets/radio-group-BHAaNGsm.js +1 -0
- package/dist/assets/server-CtzFTfKR.js +1 -0
- package/dist/assets/share-2-Dv8Do445.js +1 -0
- package/dist/assets/shield-check-CFXjOV_w.js +1 -0
- package/dist/assets/shield-x-DJTRfVux.js +1 -0
- package/dist/assets/slider-v9tXBSnB.js +1 -0
- package/dist/assets/smartphone-BSNR60L7.js +1 -0
- package/dist/assets/step-selector-ATTh_9Wa.js +1 -0
- package/dist/assets/text-align-start-qE-MbYYw.js +1 -0
- package/dist/assets/thumbs-up-D_XIW_uX.js +1 -0
- package/dist/assets/trash-DTWQwpwA.js +1 -0
- package/dist/assets/trending-up-jip5-leJ.js +1 -0
- package/dist/assets/useMockCrud-CN4vjyOZ.js +1 -0
- package/dist/assets/user-check-BlH3EDWK.js +1 -0
- package/dist/assets/user-plus-BqwXwD-c.js +1 -0
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/components/ui/resizable.d.ts +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.html +33 -0
- package/dist/index.js +1 -1
- package/dist/setup/favicon.d.ts +1 -0
- package/docs/PUBLISH.md +3 -3
- package/package.json +1 -5
- package/dist/README.md +0 -1079
- package/dist/bin/bootstrap.js +0 -40
- package/dist/bin/pull-docs.js +0 -186
- package/dist/docs/KNOWLEDGE.md +0 -109
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import{j as e,Z as t,_ as r,x as i,a0 as s,J as o,K as a}from"./index-DkiftrvI.js";import{C as n}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function d(){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 l(){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 p=`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
|
+
}`,c=`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 h(){return e.jsx(n,{title:"Popover",description:"Exibe conteúdo rico em um portal, acionado por um botão.",component:e.jsx(d,{}),usage:p,examples:[{title:"Uso Básico",description:"Popover simples com conteúdo de texto.",preview:e.jsx(l,{}),code:c}],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{h as PopoverDoc};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import{j as e,ac as s}from"./index-DkiftrvI.js";import{C as a}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function t(){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{t as ProgressDoc};
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import{j as e,r,gQ as i,B as u,ab as c,E as m,fW as p,x,G as g,H as f,I as h}from"./index-DkiftrvI.js";import{C as v}from"./ComponentDocTemplate-CQbBhfvZ.js";import{U}from"./user-check-BlH3EDWK.js";import"./ExampleCard-DuLrb3t-.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 Q(){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{Q as QualiexUserFieldDoc};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import{j as e,J as a}from"./index-DkiftrvI.js";import{C as d}from"./ComponentDocTemplate-CQbBhfvZ.js";import{R as l,a as s}from"./radio-group-BHAaNGsm.js";import"./ExampleCard-DuLrb3t-.js";function c(){return e.jsx(d,{title:"Radio Group",description:"Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.",component:e.jsxs(l,{defaultValue:"option-one",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"option-one",id:"option-one"}),e.jsx(a,{htmlFor:"option-one",children:"Option One"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"option-two",id:"option-two"}),e.jsx(a,{htmlFor:"option-two",children:"Option Two"})]})]}),usage:`import { RadioGroup, RadioGroupItem } from "forlogic-core"
|
|
2
|
+
|
|
3
|
+
<RadioGroup defaultValue="option-one">
|
|
4
|
+
<div className="flex items-center space-x-2">
|
|
5
|
+
<RadioGroupItem value="option-one" id="r1" />
|
|
6
|
+
<Label htmlFor="r1">Option One</Label>
|
|
7
|
+
</div>
|
|
8
|
+
<div className="flex items-center space-x-2">
|
|
9
|
+
<RadioGroupItem value="option-two" id="r2" />
|
|
10
|
+
<Label htmlFor="r2">Option Two</Label>
|
|
11
|
+
</div>
|
|
12
|
+
</RadioGroup>`,examples:[{title:"Básico",preview:e.jsxs(l,{defaultValue:"comfortable",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"default",id:"r1"}),e.jsx(a,{htmlFor:"r1",children:"Default"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"comfortable",id:"r2"}),e.jsx(a,{htmlFor:"r2",children:"Comfortable"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"compact",id:"r3"}),e.jsx(a,{htmlFor:"r3",children:"Compact"})]})]}),code:`<RadioGroup defaultValue="comfortable">
|
|
13
|
+
<div className="flex items-center space-x-2">
|
|
14
|
+
<RadioGroupItem value="default" id="r1" />
|
|
15
|
+
<Label htmlFor="r1">Default</Label>
|
|
16
|
+
</div>
|
|
17
|
+
<div className="flex items-center space-x-2">
|
|
18
|
+
<RadioGroupItem value="comfortable" id="r2" />
|
|
19
|
+
<Label htmlFor="r2">Comfortable</Label>
|
|
20
|
+
</div>
|
|
21
|
+
<div className="flex items-center space-x-2">
|
|
22
|
+
<RadioGroupItem value="compact" id="r3" />
|
|
23
|
+
<Label htmlFor="r3">Compact</Label>
|
|
24
|
+
</div>
|
|
25
|
+
</RadioGroup>`},{title:"Com Descrições",preview:e.jsxs(l,{defaultValue:"card",className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"card",id:"card"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"card",children:"Cartão de Crédito"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague com cartão de crédito"})]})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"paypal",id:"paypal"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"paypal",children:"PayPal"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague com sua conta PayPal"})]})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"bank",id:"bank"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"bank",children:"Transferência Bancária"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague diretamente da sua conta"})]})]})]}),code:`<RadioGroup defaultValue="card">
|
|
26
|
+
<div className="flex items-center space-x-2">
|
|
27
|
+
<RadioGroupItem value="card" id="card" />
|
|
28
|
+
<div className="space-y-0.5">
|
|
29
|
+
<Label htmlFor="card">Cartão de Crédito</Label>
|
|
30
|
+
<p className="text-sm text-muted-foreground">
|
|
31
|
+
Pague com cartão de crédito
|
|
32
|
+
</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</RadioGroup>`},{title:"Estados",preview:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(l,{defaultValue:"enabled",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"enabled",id:"enabled"}),e.jsx(a,{htmlFor:"enabled",children:"Habilitado"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"enabled2",id:"enabled2"}),e.jsx(a,{htmlFor:"enabled2",children:"Habilitado (não selecionado)"})]})]}),e.jsxs(l,{disabled:!0,defaultValue:"disabled1",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"disabled1",id:"disabled1"}),e.jsx(a,{htmlFor:"disabled1",className:"text-muted-foreground",children:"Desabilitado (selecionado)"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"disabled2",id:"disabled2"}),e.jsx(a,{htmlFor:"disabled2",className:"text-muted-foreground",children:"Desabilitado"})]})]})]}),code:`<RadioGroup defaultValue="enabled">
|
|
36
|
+
<div className="flex items-center space-x-2">
|
|
37
|
+
<RadioGroupItem value="enabled" id="enabled" />
|
|
38
|
+
<Label htmlFor="enabled">Habilitado</Label>
|
|
39
|
+
</div>
|
|
40
|
+
</RadioGroup>
|
|
41
|
+
|
|
42
|
+
<RadioGroup disabled defaultValue="disabled1">
|
|
43
|
+
<div className="flex items-center space-x-2">
|
|
44
|
+
<RadioGroupItem value="disabled1" id="disabled1" />
|
|
45
|
+
<Label htmlFor="disabled1">Desabilitado</Label>
|
|
46
|
+
</div>
|
|
47
|
+
</RadioGroup>`},{title:"Casos de Uso - Plano de Assinatura",preview:e.jsxs(l,{defaultValue:"pro",className:"space-y-3",children:[e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"free",id:"free",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"free",className:"font-semibold",children:"Free"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 0/mês - Ideal para começar"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ 5 projetos • ✓ 1GB storage • ✓ Suporte por email"})]})]}),e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"pro",id:"pro",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"pro",className:"font-semibold",children:"Pro"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 29/mês - Para times pequenos"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ Projetos ilimitados • ✓ 50GB storage • ✓ Suporte prioritário"})]})]}),e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"enterprise",id:"enterprise",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"enterprise",className:"font-semibold",children:"Enterprise"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 99/mês - Para empresas"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ Tudo do Pro • ✓ 500GB storage • ✓ Suporte 24/7 • ✓ SLA"})]})]})]}),code:`<RadioGroup defaultValue="pro">
|
|
48
|
+
<div className="flex items-start space-x-2">
|
|
49
|
+
<RadioGroupItem value="free" id="free" />
|
|
50
|
+
<div className="space-y-1">
|
|
51
|
+
<Label htmlFor="free">Free</Label>
|
|
52
|
+
<p className="text-sm text-muted-foreground">
|
|
53
|
+
R$ 0/mês - Ideal para começar
|
|
54
|
+
</p>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</RadioGroup>`}],props:[{name:"defaultValue",type:"string",default:"-",description:"O valor selecionado padrão."},{name:"value",type:"string",default:"-",description:"O valor selecionado controlado."},{name:"onValueChange",type:"(value: string) => void",default:"-",description:"Manipulador de evento quando o valor muda."},{name:"disabled",type:"boolean",default:"false",description:"Se o grupo de rádio está desabilitado."}],accessibility:["Navegação completa por teclado","Teclas de seta para selecionar opções","Segue o padrão de grupo de rádio WAI-ARIA","Gerenciamento adequado de foco"]})}export{c as RadioGroupDoc};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import{j as e,a as d,b as r,c as a,e as l,d as n}from"./index-DkiftrvI.js";function t(){const c=[{name:"none",value:"0px",class:"rounded-none"},{name:"sm",value:"2px",class:"rounded-sm"},{name:"default",value:"4px",class:"rounded"},{name:"md",value:"6px",class:"rounded-md"},{name:"lg",value:"8px",class:"rounded-lg"},{name:"xl",value:"12px",class:"rounded-xl"},{name:"2xl",value:"16px",class:"rounded-2xl"},{name:"3xl",value:"24px",class:"rounded-3xl"},{name:"full",value:"9999px",class:"rounded-full"}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h1",{className:"text-4xl font-bold tracking-tight",children:"Sistema de Raio de Borda"}),e.jsx("p",{className:"text-lg text-muted-foreground",children:"Arredondamento de cantos consistente que cria harmonia visual e define a personalidade da interface."})]}),e.jsxs(d,{children:[e.jsxs(r,{children:[e.jsx(a,{children:"Escala de Raio de Borda"}),e.jsx(l,{children:"De cantos retos (0px) a totalmente arredondados (9999px)"})]}),e.jsx(n,{className:"space-y-6",children:c.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("code",{className:"text-sm font-mono text-muted-foreground w-20",children:s.name}),e.jsx("span",{className:"text-sm text-muted-foreground",children:s.value})]}),e.jsx("code",{className:"text-xs text-muted-foreground",children:s.class})]}),e.jsx("div",{className:`h-24 bg-primary ${s.class} flex items-center justify-center`,children:e.jsx("span",{className:"text-primary-foreground text-sm font-medium",children:s.name})})]},s.name))})]}),e.jsxs(d,{children:[e.jsx(r,{children:e.jsx(a,{children:"Padrões de Uso Comuns"})}),e.jsxs(n,{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Botões"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Raio padrão de botão: ",e.jsx("code",{children:"rounded-md"})," (6px)"]}),e.jsxs("div",{className:"flex gap-3 flex-wrap",children:[e.jsx("button",{className:"px-4 py-2 bg-primary text-primary-foreground rounded-md",children:"Botão Padrão"}),e.jsx("button",{className:"px-4 py-2 bg-secondary text-secondary-foreground rounded-md",children:"Secundário"}),e.jsx("button",{className:"px-4 py-2 border border-input rounded-md",children:"Contorno"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Cards"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Standard card radius: ",e.jsx("code",{children:"rounded-lg"})," (8px)"]}),e.jsxs("div",{className:"p-6 bg-card border rounded-lg shadow-sm",children:[e.jsx("h4",{className:"font-semibold mb-2",children:"Título do Card"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Cards usam rounded-lg para uma sensação moderna e acessível."})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Inputs"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Raio padrão de input: ",e.jsx("code",{children:"rounded-md"})," (6px)"]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{type:"text",placeholder:"Campo de texto",className:"w-full px-3 py-2 border border-input rounded-md bg-background"}),e.jsx("input",{type:"email",placeholder:"Campo de email",className:"w-full px-3 py-2 border border-input rounded-md bg-background"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Avatares & Ícones"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Círculo completo: ",e.jsx("code",{children:"rounded-full"})]}),e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("div",{className:"h-12 w-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-semibold",children:"AB"}),e.jsx("div",{className:"h-12 w-12 bg-secondary rounded-full flex items-center justify-center text-secondary-foreground font-semibold",children:"CD"}),e.jsx("div",{className:"h-12 w-12 bg-accent rounded-full flex items-center justify-center text-accent-foreground font-semibold",children:"EF"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Badges & Tags"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Forma de pílula: ",e.jsx("code",{children:"rounded-full"})]}),e.jsxs("div",{className:"flex gap-2 flex-wrap",children:[e.jsx("span",{className:"px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full",children:"Primário"}),e.jsx("span",{className:"px-3 py-1 bg-secondary text-secondary-foreground text-xs font-medium rounded-full",children:"Secundário"}),e.jsx("span",{className:"px-3 py-1 bg-success text-success-foreground text-xs font-medium rounded-full",children:"Sucesso"})]})]})]})]}),e.jsxs(d,{children:[e.jsxs(r,{children:[e.jsx(a,{children:"Raio de Borda Direcional"}),e.jsx(l,{children:"Aplicar raio em cantos específicos"})]}),e.jsx(n,{className:"space-y-4",children:e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Topo"}),e.jsx("div",{className:"h-24 bg-primary rounded-t-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-t-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Baixo"}),e.jsx("div",{className:"h-24 bg-primary rounded-b-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-b-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Esquerda"}),e.jsx("div",{className:"h-24 bg-primary rounded-l-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-l-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Direita"}),e.jsx("div",{className:"h-24 bg-primary rounded-r-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-r-lg"})})]})]})})]}),e.jsxs(d,{children:[e.jsx(r,{children:e.jsx(a,{children:"Diretrizes de Raio de Borda"})}),e.jsxs(n,{className:"prose prose-slate dark:prose-invert max-w-none",children:[e.jsx("h3",{children:"Princípios de Design"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Consistência"}),": Use o mesmo raio para tipos de componentes similares"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Hierarquia"}),": Componentes maiores podem usar valores de raio maiores"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Contexto"}),": Combine o raio com a função e importância do componente"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Harmonia"}),": Garanta que as escolhas de raio funcionem juntas na interface"]})]}),e.jsx("h3",{children:"Recomendações por Componente"}),e.jsxs("table",{className:"min-w-full",children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{className:"text-left",children:"Componente"}),e.jsx("th",{className:"text-left",children:"Raio"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"Botões"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Cards"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-lg"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Inputs"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Modais"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-lg"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Badges"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-full"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Avatares"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-full"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Tooltips"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]})]})]}),e.jsx("h3",{children:"Melhores Práticas"}),e.jsxs("ul",{children:[e.jsxs("li",{children:["Use ",e.jsx("code",{children:"rounded-none"})," com moderação - cantos retos podem parecer ásperos"]}),e.jsx("li",{children:"Combine raio de borda com tamanho do componente (maior = mais raio)"}),e.jsxs("li",{children:["Use ",e.jsx("code",{children:"rounded-full"})," para elementos circulares (avatares, botões de ícone)"]}),e.jsx("li",{children:"Mantenha valores de raio consistentes dentro de famílias de componentes"}),e.jsx("li",{children:"Teste como o raio aparece em diferentes tamanhos de tela"})]}),e.jsx("h4",{className:"font-semibold mb-3 mt-6",children:"Exemplos de Código"}),e.jsxs("div",{className:"space-y-4 not-prose",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-medium mb-2 text-green-600 dark:text-green-400",children:"✅ Correto"}),e.jsx("pre",{className:"bg-muted p-3 rounded-md text-xs overflow-x-auto",children:e.jsx("code",{children:`<Button className="rounded-md">Enviar</Button>
|
|
2
|
+
<Card className="rounded-lg">...</Card>
|
|
3
|
+
|
|
4
|
+
// Raio direcional para elementos conectados
|
|
5
|
+
<div className="rounded-t-lg">Cabeçalho</div>
|
|
6
|
+
<div className="rounded-b-lg">Rodapé</div>`})})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-medium mb-2 text-red-600 dark:text-red-400",children:"❌ Incorreto"}),e.jsx("pre",{className:"bg-muted p-3 rounded-md text-xs overflow-x-auto",children:e.jsx("code",{children:`<Button className="rounded-3xl">Enviar</Button>
|
|
7
|
+
<Card className="rounded-none">...</Card>`})})]})]})]})]})]})}export{t as RadiusDoc};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import{r as o,j as e,h as S,o as x,d7 as A,K as G,aG as z,T as k,i as B,k as w,l,p as V,q as n,B as H,x as M,aY as W,aX as F,a4 as O,dv as _,dw as K,ei as Q}from"./index-DkiftrvI.js";import{E as h}from"./ExampleCard-DuLrb3t-.js";import{I as X}from"./iframe-dialog-V0mW5aBb.js";import{H as Y}from"./hourglass-BahQ3eDv.js";var c=(t=>(t[t.WaitingProcessing=1]="WaitingProcessing",t[t.Processing=2]="Processing",t[t.Completed=3]="Completed",t[t.Error=4]="Error",t[t.Expired=5]="Expired",t))(c||{});const J={report:"Relatório",status:"Status",requestDate:"Data da solicitação",lastUpdate:"Última atualização",expirationDate:"Data de expiração",viewReport:"Visualizar relatório",searchPlaceholder:"Buscar relatório...",noResults:"Nenhum relatório encontrado",statusWaiting:"Aguardando",statusProcessing:"Processando",statusCompleted:"Concluído",statusError:"Erro",statusExpired:"Expirado"};function Z(t){return new Date>new Date(t.expirationDate)&&t.statusId===3?5:t.statusId}function $(t,i){switch(t){case 1:return{label:i.statusWaiting,icon:e.jsx(Y,{className:"h-3.5 w-3.5"}),variant:"outline",className:"text-amber-600 border-amber-300 bg-amber-50"};case 2:return{label:i.statusProcessing,icon:e.jsx(Q,{className:"h-3.5 w-3.5 animate-spin"}),variant:"outline",className:"text-blue-600 border-blue-300 bg-blue-50"};case 3:return{label:i.statusCompleted,icon:e.jsx(K,{className:"h-3.5 w-3.5"}),variant:"outline",className:"text-emerald-600 border-emerald-300 bg-emerald-50"};case 4:return{label:i.statusError,icon:e.jsx(_,{className:"h-3.5 w-3.5"}),variant:"danger"};case 5:return{label:i.statusExpired,icon:e.jsx(O,{className:"h-3.5 w-3.5"}),variant:"outline",className:"text-orange-600 border-orange-300 bg-orange-50"};default:return{label:"—",icon:null,variant:"secondary"}}}function R(t){return(t??"").normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase()}function ee(t){return t.toLocaleDateString("pt-BR",{day:"2-digit",month:"short",year:"numeric",hour:"2-digit",minute:"2-digit"})}function f({requests:t,isLoading:i=!1,onGetReportUrl:d,formatDate:g=ee,labels:b,className:j}){const r={...J,...b},[m,C]=o.useState(""),[y,D]=o.useState(!1),[E,L]=o.useState(""),[U,I]=o.useState(""),[u,N]=o.useState(null),v=o.useMemo(()=>{if(!m)return t;const a=R(m);return t.filter(s=>R(s.reportName).includes(a))},[t,m]),P=o.useCallback(async a=>{if(!u){N(a.id);try{const s=await d(a.id);s&&(L(s),I(a.reportName),D(!0))}finally{N(null)}}},[d,u]);return i?e.jsx("div",{className:x("space-y-3",j),children:Array.from({length:5}).map((a,s)=>e.jsx(S,{className:"h-12 w-full"},s))}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:x("space-y-3",j),children:[e.jsxs("div",{className:"relative max-w-sm",children:[e.jsx(A,{className:"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),e.jsx(G,{className:"pl-8 h-9 text-sm",placeholder:r.searchPlaceholder,value:m,onChange:a=>C(a.target.value)})]}),e.jsx(z,{className:"rounded-md border",children:e.jsxs(k,{children:[e.jsx(B,{children:e.jsxs(w,{children:[e.jsx(l,{className:"min-w-[140px]",children:r.report}),e.jsx(l,{className:"min-w-[150px]",children:r.status}),e.jsx(l,{className:"min-w-[160px]",children:r.requestDate}),e.jsx(l,{className:"min-w-[160px]",children:r.lastUpdate}),e.jsx(l,{className:"min-w-[160px]",children:r.expirationDate}),e.jsx(l,{className:"min-w-[140px]"})]})}),e.jsx(V,{children:v.length===0?e.jsx(w,{children:e.jsx(n,{colSpan:6,className:"text-center text-muted-foreground py-8",children:r.noResults})}):v.map(a=>{const s=Z(a),p=$(s,r),T=s===3,q=s===5;return e.jsxs(w,{children:[e.jsx(n,{className:"font-medium",children:a.reportName}),e.jsx(n,{children:e.jsxs(H,{variant:p.variant,className:x("gap-1",p.className),children:[p.icon,p.label]})}),e.jsx(n,{className:"text-sm",children:g(new Date(a.requestDate))}),e.jsx(n,{className:"text-sm",children:g(new Date(a.lastUpdate))}),e.jsx(n,{className:x("text-sm",q&&"text-destructive"),children:g(new Date(a.expirationDate))}),e.jsx(n,{children:e.jsxs(M,{variant:"ghost",size:"sm",className:"gap-1.5",disabled:!T||u===a.id,onClick:()=>P(a),children:[u===a.id?e.jsx(W,{className:"h-4 w-4 animate-spin"}):e.jsx(F,{className:"h-4 w-4"}),r.viewReport]})})]},a.id)})})]})})]}),e.jsx(X,{open:y,onOpenChange:D,url:E,title:U})]})}const te=[{id:"r1",reportName:"Relatório Geral de Auditoria",requestDate:new Date(2026,2,28,14,30),statusId:c.Completed,expirationDate:new Date(2026,3,28,14,30),lastUpdate:new Date(2026,2,28,14,35)},{id:"r2",reportName:"Relatório de Não Conformidades",requestDate:new Date(2026,2,30,9,0),statusId:c.Processing,expirationDate:new Date(2026,3,30,9,0),lastUpdate:new Date(2026,2,30,9,5)},{id:"r3",reportName:"Relatório de Indicadores",requestDate:new Date(2026,1,15,10,0),statusId:c.Completed,expirationDate:new Date(2026,1,20,10,0),lastUpdate:new Date(2026,1,15,10,10)},{id:"r4",reportName:"Relatório Mensal",requestDate:new Date(2026,2,31,8,0),statusId:c.WaitingProcessing,expirationDate:new Date(2026,4,1,8,0),lastUpdate:new Date(2026,2,31,8,0)},{id:"r5",reportName:"Relatório de Ações Corretivas",requestDate:new Date(2026,2,25,16,0),statusId:c.Error,expirationDate:new Date(2026,3,25,16,0),lastUpdate:new Date(2026,2,25,16,2)}];function ae(){const t=async i=>(await new Promise(d=>setTimeout(d,1e3)),"https://example.com/report");return e.jsx(f,{requests:te,onGetReportUrl:t})}function se(){return e.jsx(f,{requests:[],isLoading:!0,onGetReportUrl:async()=>null})}function re(){return e.jsx(f,{requests:[],onGetReportUrl:async()=>null})}function ce(){return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold mb-2",children:"Report Request List"}),e.jsxs("p",{className:"text-muted-foreground",children:["Lista de solicitações de relatório com status, busca e visualização via ",e.jsx("code",{children:"IframeDialog"}),". Portado de ",e.jsx("code",{children:"qex-report-request"})," (v1)."]})]}),e.jsx(h,{title:"Com relatórios",description:"Lista com diferentes status. Clique em 'Visualizar relatório' nos itens concluídos.",preview:e.jsx(ae,{}),code:`<ReportRequestList
|
|
2
|
+
requests={requests}
|
|
3
|
+
onGetReportUrl={async (id) => fetchReportUrl(id)}
|
|
4
|
+
/>`}),e.jsx(h,{title:"Carregando",description:"Estado de loading com skeletons.",preview:e.jsx(se,{}),code:"<ReportRequestList requests={[]} isLoading onGetReportUrl={async () => null} />"}),e.jsx(h,{title:"Vazio",description:"Sem relatórios.",preview:e.jsx(re,{}),code:"<ReportRequestList requests={[]} onGetReportUrl={async () => null} />"}),e.jsx(h,{title:"Importação",description:"Como usar o componente.",preview:e.jsx("pre",{className:"bg-muted p-4 rounded text-sm overflow-x-auto",children:`import { ReportRequestList, ReportRequestStatus } from 'forlogic-core';
|
|
5
|
+
import type { ReportRequest } from 'forlogic-core';`}),code:`import { ReportRequestList, ReportRequestStatus } from 'forlogic-core';
|
|
6
|
+
import type { ReportRequest } from 'forlogic-core';
|
|
7
|
+
|
|
8
|
+
<ReportRequestList
|
|
9
|
+
requests={reportRequests}
|
|
10
|
+
onGetReportUrl={async (id) => {
|
|
11
|
+
const url = await api.getReportLink(id);
|
|
12
|
+
return url;
|
|
13
|
+
}}
|
|
14
|
+
formatDate={(date) => format(date, 'dd/MM/yyyy HH:mm')}
|
|
15
|
+
/>`})]})}export{ce as ReportRequestListDoc};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import{j as e,bs as q,o as d,dU as y,f8 as j,f9 as C,fa as b,fb as N,r as x,J as f,K as g}from"./index-DkiftrvI.js";import{C as w}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function o({filled:l,total:a,missingFields:i,size:m="sm",className:n,completeText:c="Campos obrigatórios preenchidos",incompleteText:r}){const t=l===a&&a>0,p={sm:{text:"text-xs",icon:"h-3.5 w-3.5",gap:"gap-1.5"},md:{text:"text-sm",icon:"h-4 w-4",gap:"gap-2"},lg:{text:"text-base",icon:"h-5 w-5",gap:"gap-2.5"}},{text:s,icon:h,gap:F}=p[m],T=`${l}/${a} campos obrigatórios`,R=r?.replace("{filled}",String(l)).replace("{total}",String(a))??T,u=e.jsxs("div",{className:d("flex items-center transition-all duration-300",F,s,t?"text-success":"text-muted-foreground",i&&i.length>0&&"cursor-help",n),children:[t?e.jsx(q,{className:d(h,"animate-success-pop")}):e.jsx(y,{className:d(h,"transition-transform")}),e.jsx("span",{className:d("transition-all duration-300",t&&"font-medium"),children:t?c:R})]});return t?e.jsx(j,{children:e.jsxs(C,{children:[e.jsx(b,{asChild:!0,children:u}),e.jsx(N,{side:"top",children:e.jsx("span",{className:"text-xs",children:"Todos os campos obrigatórios preenchidos ✓"})})]})}):i&&i.length>0?e.jsx(j,{children:e.jsxs(C,{children:[e.jsx(b,{asChild:!0,children:u}),e.jsx(N,{side:"top",className:"max-w-[250px]",children:e.jsxs("div",{className:"text-xs",children:[e.jsx("p",{className:"font-medium mb-1",children:"Campos faltantes:"}),e.jsx("ul",{className:"list-disc list-inside space-y-0.5",children:i.map(v=>e.jsx("li",{children:v},v))})]})})]})}):u}function z(){const[l,a]=x.useState(""),[i,m]=x.useState(""),[n,c]=x.useState(""),r=[{label:"Nome",value:l},{label:"Email",value:i},{label:"Telefone",value:n}],t=r.filter(s=>s.value.trim()!=="").length,p=r.filter(s=>s.value.trim()==="").map(s=>s.label);return e.jsxs("div",{className:"space-y-4 w-full max-w-sm",children:[e.jsx(o,{filled:t,total:3,missingFields:p,size:"md"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Nome *"}),e.jsx(g,{value:l,onChange:s=>a(s.target.value),placeholder:"Digite seu nome"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Email *"}),e.jsx(g,{value:i,onChange:s=>m(s.target.value),placeholder:"Digite seu email"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Telefone *"}),e.jsx(g,{value:n,onChange:s=>c(s.target.value),placeholder:"Digite seu telefone"})]})]})]})}function S(){return e.jsx(w,{title:"RequiredFieldsCounter",description:"Indica o progresso de preenchimento de campos obrigatórios em formulários com feedback visual e tooltips informativos.",installation:'import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"',component:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx(o,{filled:2,total:5}),e.jsx(o,{filled:5,total:5})]}),usage:`import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"
|
|
2
|
+
|
|
3
|
+
// Progresso parcial
|
|
4
|
+
<RequiredFieldsCounter filled={2} total={5} />
|
|
5
|
+
|
|
6
|
+
// Formulário completo
|
|
7
|
+
<RequiredFieldsCounter filled={5} total={5} />`,examples:[{title:"Estado Básico",description:"Mostra o progresso de preenchimento com ícone de informação",preview:e.jsx(o,{filled:2,total:5}),code:"<RequiredFieldsCounter filled={2} total={5} />"},{title:"Formulário Completo",description:"Quando todos os campos são preenchidos, exibe ícone de check com animação",preview:e.jsx(o,{filled:5,total:5}),code:"<RequiredFieldsCounter filled={5} total={5} />"},{title:"Com Campos Faltantes",description:"Ao passar missingFields, um tooltip lista os campos pendentes",preview:e.jsx(o,{filled:3,total:5,missingFields:["Nome","Email"]}),code:`<RequiredFieldsCounter
|
|
8
|
+
filled={3}
|
|
9
|
+
total={5}
|
|
10
|
+
missingFields={["Nome", "Email"]}
|
|
11
|
+
/>`},{title:"Tamanhos",description:"Disponível em três tamanhos: sm (padrão), md e lg",preview:e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(o,{filled:2,total:4,size:"sm"}),e.jsx(o,{filled:2,total:4,size:"md"}),e.jsx(o,{filled:2,total:4,size:"lg"})]}),code:`<RequiredFieldsCounter filled={2} total={4} size="sm" />
|
|
12
|
+
<RequiredFieldsCounter filled={2} total={4} size="md" />
|
|
13
|
+
<RequiredFieldsCounter filled={2} total={4} size="lg" />`},{title:"Uso em Header",description:"Tamanho lg ideal para headers de página e formulários com destaque",preview:e.jsxs("div",{className:"flex items-center justify-between p-4 border rounded-lg bg-card w-full",children:[e.jsx("h2",{className:"text-lg font-semibold",children:"Novo Plano de Controle"}),e.jsx(o,{filled:3,total:8,size:"lg",missingFields:["Código","Título","Responsável","Data","Modelo"]})]}),code:`<div className="flex items-center justify-between p-4 border rounded-lg">
|
|
14
|
+
<h2 className="text-lg font-semibold">Novo Plano de Controle</h2>
|
|
15
|
+
<RequiredFieldsCounter
|
|
16
|
+
filled={3}
|
|
17
|
+
total={8}
|
|
18
|
+
size="lg"
|
|
19
|
+
missingFields={["Código", "Título", "Responsável", "Data", "Modelo"]}
|
|
20
|
+
/>
|
|
21
|
+
</div>`},{title:"Banner de Status",description:"Use lg em banners de progresso ou conclusão para maior visibilidade",preview:e.jsx("div",{className:"bg-muted/50 rounded-lg p-4 flex items-center justify-center w-full",children:e.jsx(o,{filled:5,total:5,size:"lg",completeText:"Formulário completo! Pronto para enviar."})}),code:`<div className="bg-muted/50 rounded-lg p-4 flex items-center justify-center">
|
|
22
|
+
<RequiredFieldsCounter
|
|
23
|
+
filled={5}
|
|
24
|
+
total={5}
|
|
25
|
+
size="lg"
|
|
26
|
+
completeText="Formulário completo! Pronto para enviar."
|
|
27
|
+
/>
|
|
28
|
+
</div>`},{title:"Texto Customizado",description:"Personalize os textos de estado completo e incompleto",preview:e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(o,{filled:2,total:4,incompleteText:"{filled} de {total} preenchidos"}),e.jsx(o,{filled:4,total:4,completeText:"Formulário completo!"})]}),code:`<RequiredFieldsCounter
|
|
29
|
+
filled={2}
|
|
30
|
+
total={4}
|
|
31
|
+
incompleteText="{filled} de {total} preenchidos"
|
|
32
|
+
/>
|
|
33
|
+
|
|
34
|
+
<RequiredFieldsCounter
|
|
35
|
+
filled={4}
|
|
36
|
+
total={4}
|
|
37
|
+
completeText="Formulário completo!"
|
|
38
|
+
/>`},{title:"Demo Interativa",description:"Preencha os campos para ver o contador atualizar em tempo real",preview:e.jsx(z,{}),code:`function FormExample() {
|
|
39
|
+
const [name, setName] = useState('');
|
|
40
|
+
const [email, setEmail] = useState('');
|
|
41
|
+
|
|
42
|
+
const filled = [name, email].filter(v => v.trim() !== '').length;
|
|
43
|
+
const missing = [];
|
|
44
|
+
if (!name.trim()) missing.push('Nome');
|
|
45
|
+
if (!email.trim()) missing.push('Email');
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<div className="space-y-4">
|
|
49
|
+
<RequiredFieldsCounter
|
|
50
|
+
filled={filled}
|
|
51
|
+
total={2}
|
|
52
|
+
missingFields={missing}
|
|
53
|
+
/>
|
|
54
|
+
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
|
55
|
+
<Input value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
}`}],props:[{name:"filled",type:"number",description:"Quantidade de campos obrigatórios preenchidos"},{name:"total",type:"number",description:"Total de campos obrigatórios no formulário"},{name:"missingFields",type:"string[]",description:"Lista de nomes dos campos faltantes (exibe tooltip)"},{name:"size",type:'"sm" | "md" | "lg"',default:'"sm"',description:"Tamanho do componente: sm para inline/formulários, md para cards, lg para headers/banners"},{name:"className",type:"string",description:"Classes CSS adicionais"},{name:"completeText",type:"string",default:'"Campos obrigatórios preenchidos"',description:"Texto exibido quando todos os campos estão preenchidos"},{name:"incompleteText",type:"string",description:"Texto customizado para estado incompleto. Use {filled} e {total} como placeholders"}],accessibility:["Usa Tooltip para fornecer informações adicionais sobre campos faltantes","Cores semânticas (success para completo, muted para incompleto) auxiliam na identificação visual","Animação sutil no ícone de check fornece feedback de conclusão","Texto sempre visível, não depende apenas de cor para transmitir informação"],notes:['O componente usa a animação "success-pop" definida no tailwind.config.ts','Importar de "@/shared/components" ou diretamente de "@/shared/components/RequiredFieldsCounter"',"Ideal para uso em headers de formulários ou ao lado de botões de submit"]})}export{S as RequiredFieldsCounterDoc};
|