forlogic-core 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +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/modules/ModulesContent.d.ts +7 -3
- package/dist/components/modules/ModulesFooterCards.d.ts +3 -1
- package/dist/components/modules/types.d.ts +3 -1
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/components/ui/resizable.d.ts +1 -1
- package/dist/exports/crud.d.ts +5 -1
- package/dist/exports/ui.d.ts +8 -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,53 @@
|
|
|
1
|
+
import{r as k,j as o,a_ as e,F as S,a$ as n,ad as l,aJ as c,b0 as h,y as f,P as r,Y as d}from"./index-DkiftrvI.js";import{C as g}from"./ComponentDocTemplate-CQbBhfvZ.js";import{S as p,C as y}from"./share-2-Dv8Do445.js";import"./ExampleCard-DuLrb3t-.js";const A=`import { SplitButton } from 'forlogic-core';
|
|
2
|
+
import { Plus } from 'lucide-react';
|
|
3
|
+
|
|
4
|
+
<SplitButton
|
|
5
|
+
label="Adicionar Coluna"
|
|
6
|
+
onClick={() => handleAddColumn()}
|
|
7
|
+
icon={Plus}
|
|
8
|
+
actions={[
|
|
9
|
+
{ id: 'add-column', label: 'Adicionar Coluna', onClick: handleAddColumn },
|
|
10
|
+
{ id: 'add-group', label: 'Adicionar Grupo', onClick: handleAddGroup },
|
|
11
|
+
]}
|
|
12
|
+
/>`,E=`// Variante default (primary)
|
|
13
|
+
<SplitButton label="Primary" onClick={onClick} actions={actions} />
|
|
14
|
+
|
|
15
|
+
// Variante secondary
|
|
16
|
+
<SplitButton label="Secondary" variant="secondary" onClick={onClick} actions={actions} />
|
|
17
|
+
|
|
18
|
+
// Variante outline
|
|
19
|
+
<SplitButton label="Outline" variant="outline" onClick={onClick} actions={actions} />
|
|
20
|
+
|
|
21
|
+
// Variante ghost
|
|
22
|
+
<SplitButton label="Ghost" variant="ghost" onClick={onClick} actions={actions} />`,j=`// Tamanho pequeno
|
|
23
|
+
<SplitButton label="Small" size="sm" onClick={onClick} actions={actions} />
|
|
24
|
+
|
|
25
|
+
// Tamanho padrão
|
|
26
|
+
<SplitButton label="Default" size="default" onClick={onClick} actions={actions} />
|
|
27
|
+
|
|
28
|
+
// Tamanho grande
|
|
29
|
+
<SplitButton label="Large" size="lg" onClick={onClick} actions={actions} />`,B=`// Estado de loading
|
|
30
|
+
<SplitButton label="Salvando..." loading onClick={onClick} actions={actions} />
|
|
31
|
+
|
|
32
|
+
// Estado desabilitado
|
|
33
|
+
<SplitButton label="Desabilitado" disabled onClick={onClick} actions={actions} />`,D=`// Quando não há ações secundárias, comporta-se como botão simples
|
|
34
|
+
<SplitButton
|
|
35
|
+
label="Salvar"
|
|
36
|
+
onClick={() => handleSave()}
|
|
37
|
+
icon={Save}
|
|
38
|
+
/>`,w=`<SplitButton
|
|
39
|
+
label="Ações"
|
|
40
|
+
onClick={() => handleDefault()}
|
|
41
|
+
actions={[
|
|
42
|
+
{ id: 'copy', label: 'Copiar', icon: Copy, onClick: handleCopy },
|
|
43
|
+
{ id: 'delete', label: 'Excluir', icon: Trash2, onClick: handleDelete, variant: 'destructive' },
|
|
44
|
+
]}
|
|
45
|
+
/>`;function N(){const[t,s]=k.useState(!1),a=x=>{d.success(`Ação executada: ${x}`)},u=()=>{s(!0),setTimeout(()=>{s(!1),d.success("Salvo com sucesso!")},2e3)},m=[{id:"add-column",label:"Adicionar Coluna",icon:y,onClick:()=>a("Adicionar Coluna")},{id:"add-group",label:"Adicionar Grupo",icon:r,onClick:()=>a("Adicionar Grupo")}],i=[{id:"save-draft",label:"Salvar como Rascunho",icon:S,onClick:()=>a("Salvar Rascunho")},{id:"save-template",label:"Salvar como Modelo",icon:n,onClick:()=>a("Salvar Modelo")}],C=[{id:"export-pdf",label:"Exportar PDF",onClick:()=>a("Exportar PDF")},{id:"export-excel",label:"Exportar Excel",onClick:()=>a("Exportar Excel")},{id:"export-csv",label:"Exportar CSV",onClick:()=>a("Exportar CSV")}],b=[{id:"email",label:"Enviar por E-mail",icon:h,onClick:()=>a("E-mail")},{id:"link",label:"Copiar Link",icon:n,onClick:()=>a("Link")},{id:"share",label:"Compartilhar",icon:p,onClick:()=>a("Compartilhar")}],v=[{id:"copy",label:"Duplicar",icon:n,onClick:()=>a("Duplicar")},{id:"delete",label:"Excluir",icon:f,onClick:()=>a("Excluir"),variant:"destructive"}];return o.jsx(g,{title:"Split Button",description:"Combina uma ação principal com ações secundárias em um menu dropdown. Ideal para destacar a ação prioritária enquanto mantém alternativas acessíveis.",component:o.jsx("div",{className:"flex items-center gap-4",children:o.jsx(e,{label:"Adicionar Coluna",onClick:()=>a("Adicionar Coluna"),icon:r,actions:m})}),usage:A,notes:["Ação principal destacada com clique direto","Menu dropdown para ações secundárias","Estados hover e active independentes para cada área","Suporte a ícones, loading e disabled","Fallback para botão simples quando sem ações secundárias","4 variantes visuais e 3 tamanhos"],examples:[{title:"Variantes",description:"O Split Button suporta as mesmas variantes do Button padrão.",preview:o.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[o.jsx(e,{label:"Primary",onClick:()=>a("Primary"),actions:i}),o.jsx(e,{label:"Secondary",variant:"secondary",onClick:()=>a("Secondary"),actions:i}),o.jsx(e,{label:"Outline",variant:"outline",onClick:()=>a("Outline"),actions:i}),o.jsx(e,{label:"Ghost",variant:"ghost",onClick:()=>a("Ghost"),actions:i})]}),code:E},{title:"Tamanhos",description:"Três tamanhos disponíveis: sm, default e lg.",preview:o.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[o.jsx(e,{label:"Small",size:"sm",onClick:()=>a("Small"),actions:i}),o.jsx(e,{label:"Default",size:"default",onClick:()=>a("Default"),actions:i}),o.jsx(e,{label:"Large",size:"lg",onClick:()=>a("Large"),actions:i})]}),code:j},{title:"Com Ícones",description:"Adicione ícones ao botão principal e às ações do menu.",preview:o.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[o.jsx(e,{label:"Salvar",onClick:()=>a("Salvar"),icon:l,actions:i}),o.jsx(e,{label:"Exportar",onClick:()=>a("Exportar"),icon:c,variant:"secondary",actions:C}),o.jsx(e,{label:"Compartilhar",onClick:()=>a("Compartilhar"),icon:p,variant:"outline",actions:b})]}),code:`<SplitButton
|
|
46
|
+
label="Salvar"
|
|
47
|
+
onClick={handleSave}
|
|
48
|
+
icon={Save}
|
|
49
|
+
actions={[
|
|
50
|
+
{ id: 'draft', label: 'Salvar como Rascunho', icon: FileText, onClick: handleDraft },
|
|
51
|
+
{ id: 'template', label: 'Salvar como Modelo', icon: Copy, onClick: handleTemplate },
|
|
52
|
+
]}
|
|
53
|
+
/>`},{title:"Estados: Loading e Disabled",description:"O Split Button suporta estados de loading e disabled que afetam ambas as áreas.",preview:o.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[o.jsx(e,{label:t?"Salvando...":"Salvar",loading:t,onClick:u,icon:l,actions:i}),o.jsx(e,{label:"Desabilitado",disabled:!0,onClick:()=>{},actions:i})]}),code:B},{title:"Ação Única (Fallback)",description:"Quando não há ações secundárias, o componente se comporta como um botão simples.",preview:o.jsxs("div",{className:"flex items-center gap-4",children:[o.jsx(e,{label:"Salvar",onClick:()=>a("Salvar"),icon:l}),o.jsx(e,{label:"Exportar",onClick:()=>a("Exportar"),icon:c,variant:"secondary"})]}),code:D},{title:"Ação Destrutiva",description:"Ações podem ter variante destructive para indicar operações perigosas.",preview:o.jsx("div",{className:"flex items-center gap-4",children:o.jsx(e,{label:"Ações",onClick:()=>a("Ação padrão"),variant:"outline",actions:v})}),code:w}],props:[{name:"label",type:"string",description:"Texto exibido no botão principal (obrigatório)"},{name:"onClick",type:"() => void",description:"Callback executado ao clicar no botão principal (obrigatório)"},{name:"icon",type:"LucideIcon",description:"Ícone opcional exibido antes do label"},{name:"actions",type:"SplitButtonAction[]",default:"[]",description:"Lista de ações secundárias exibidas no dropdown"},{name:"variant",type:"'default' | 'secondary' | 'outline' | 'ghost'",default:"'default'",description:"Variante visual do botão"},{name:"size",type:"'sm' | 'default' | 'lg'",default:"'default'",description:"Tamanho do botão"},{name:"disabled",type:"boolean",default:"false",description:"Desabilita todo o componente"},{name:"loading",type:"boolean",default:"false",description:"Exibe estado de loading"},{name:"menuAlign",type:"'start' | 'end'",default:"'end'",description:"Alinhamento do menu dropdown"},{name:"className",type:"string",description:"Classes CSS adicionais"}],accessibility:["O botão principal é focável e ativável por teclado","O trigger do dropdown tem aria-label descritivo","O menu pode ser navegado com setas do teclado","Esc fecha o menu e retorna o foco","Estados disabled são anunciados por leitores de tela"]})}export{N as SplitButtonDoc};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import{j as e,r as n,a as p,x as r}from"./index-DkiftrvI.js";import{C as m}from"./ComponentDocTemplate-CQbBhfvZ.js";import{S as s}from"./step-selector-ATTh_9Wa.js";import"./ExampleCard-DuLrb3t-.js";function x(){const[a,t]=n.useState(1);return e.jsxs("div",{className:"flex flex-col items-center gap-4 p-4",children:[e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(r,{variant:"outline",size:"sm",onClick:()=>t(Math.max(1,a-1)),disabled:a===1,children:"Voltar"}),e.jsx(r,{size:"sm",onClick:()=>t(Math.min(4,a+1)),disabled:a===4,children:"Avançar"})]})]})}function u(){const[a,t]=n.useState(1),o=["Tipo","Dados","Configuração","Confirmar"];return e.jsxs("div",{className:"flex flex-col items-center gap-4 p-4",children:[e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,stepLabels:o}),e.jsxs(p,{className:"p-4 text-center min-w-[200px]",children:[e.jsx("p",{className:"text-sm text-muted-foreground",children:"Etapa atual:"}),e.jsx("p",{className:"font-medium",children:o[a-1]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(r,{variant:"outline",size:"sm",onClick:()=>t(Math.max(1,a-1)),disabled:a===1,children:"Voltar"}),e.jsx(r,{size:"sm",onClick:()=>t(Math.min(4,a+1)),disabled:a===4,children:"Avançar"})]})]})}function S(){const[a,t]=n.useState(1),[o,c]=n.useState(1),l=["Informações","Endereço","Pagamento","Revisão"],d=()=>{const i=Math.min(4,a+1);t(i),c(Math.max(o,i))};return e.jsxs("div",{className:"flex flex-col items-center gap-4 p-4",children:[e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,stepLabels:l,canGoToStep:i=>i<=o}),e.jsxs(p,{className:"p-4 text-center min-w-[200px]",children:[e.jsxs("p",{className:"text-sm text-muted-foreground mb-2",children:["Máximo acessível: Etapa ",o]}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Etapas futuras ficam desabilitadas até você avançar"})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(r,{variant:"outline",size:"sm",onClick:()=>t(Math.max(1,a-1)),disabled:a===1,children:"Voltar"}),e.jsx(r,{size:"sm",onClick:d,disabled:a===4,children:"Validar e Avançar"})]})]})}function g(){const[a,t]=n.useState(2);return e.jsx("div",{className:"flex flex-col items-center gap-6 p-4",children:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-sm text-muted-foreground w-16",children:"w-24:"}),e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,progressWidth:"w-24"})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-sm text-muted-foreground w-16",children:"w-32:"}),e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,progressWidth:"w-32"})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-sm text-muted-foreground w-16",children:"w-48:"}),e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,progressWidth:"w-48"})]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-sm text-muted-foreground w-16",children:"w-64:"}),e.jsx(s,{currentStep:a,totalSteps:4,onStepChange:t,progressWidth:"w-64"})]})]})})}const h=`import { StepSelector } from 'forlogic-core';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
|
|
4
|
+
function MyWizard() {
|
|
5
|
+
const [step, setStep] = useState(1);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<StepSelector
|
|
9
|
+
currentStep={step}
|
|
10
|
+
totalSteps={4}
|
|
11
|
+
onStepChange={setStep}
|
|
12
|
+
stepLabels={['Tipo', 'Dados', 'Config', 'Confirmar']}
|
|
13
|
+
canGoToStep={(target) => target <= maxValidStep}
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
}`,f=`<StepSelector
|
|
17
|
+
currentStep={step}
|
|
18
|
+
totalSteps={4}
|
|
19
|
+
onStepChange={setStep}
|
|
20
|
+
stepLabels={['Tipo', 'Dados', 'Configuração', 'Confirmar']}
|
|
21
|
+
/>`,v=`const [step, setStep] = useState(1);
|
|
22
|
+
const [maxValidStep, setMaxValidStep] = useState(1);
|
|
23
|
+
|
|
24
|
+
// Ao avançar, aumenta o máximo acessível
|
|
25
|
+
const handleNext = () => {
|
|
26
|
+
const nextStep = step + 1;
|
|
27
|
+
setStep(nextStep);
|
|
28
|
+
setMaxValidStep(Math.max(maxValidStep, nextStep));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
<StepSelector
|
|
32
|
+
currentStep={step}
|
|
33
|
+
totalSteps={4}
|
|
34
|
+
onStepChange={setStep}
|
|
35
|
+
stepLabels={['Informações', 'Endereço', 'Pagamento', 'Revisão']}
|
|
36
|
+
canGoToStep={(target) => target <= maxValidStep}
|
|
37
|
+
/>`,j=`// Larguras disponíveis via Tailwind classes
|
|
38
|
+
<StepSelector progressWidth="w-24" {...props} /> // Compacto
|
|
39
|
+
<StepSelector progressWidth="w-32" {...props} /> // Padrão
|
|
40
|
+
<StepSelector progressWidth="w-48" {...props} /> // Médio
|
|
41
|
+
<StepSelector progressWidth="w-64" {...props} /> // Largo`;function W(){return e.jsx(m,{title:"Step Selector",description:"Componente de navegação para Wizards multi-etapas. Combina um DropdownMenu para seleção de etapas com uma barra de Progress para indicação visual do progresso.",component:e.jsx(x,{}),usage:h,examples:[{title:"Com Labels Customizados",description:"Use stepLabels para definir nomes descritivos para cada etapa. Os labels aparecem no dropdown de navegação.",preview:e.jsx(u,{}),code:f},{title:"Com Validação de Navegação",description:"Use canGoToStep para controlar quais etapas estão acessíveis. Navegação para etapas anteriores é sempre permitida.",preview:e.jsx(S,{}),code:v},{title:"Larguras Customizadas",description:"Ajuste a largura da barra de progresso com progressWidth para diferentes contextos de layout.",preview:e.jsx(g,{}),code:j}],props:[{name:"currentStep",type:"number",description:"Etapa atual (1-indexed). A primeira etapa é 1."},{name:"totalSteps",type:"number",description:"Total de etapas do Wizard."},{name:"onStepChange",type:"(step: number) => void",description:"Callback chamado quando uma etapa é selecionada."},{name:"stepLabels",type:"string[]",description:'Labels customizados para cada etapa. Se não fornecido, usa "Etapa N".'},{name:"canGoToStep",type:"(targetStep: number) => boolean",description:"Função que valida se pode navegar para uma etapa específica. Retornar para etapas anteriores é sempre permitido."},{name:"className",type:"string",description:"Classes CSS adicionais para o container."},{name:"progressWidth",type:"string",default:'"w-32"',description:"Largura da barra de progresso. Aceita classes Tailwind (w-24, w-32, w-48, etc.)."}],accessibility:["Suporte completo a navegação por teclado (Tab, Enter, Escape)","O dropdown usa Radix UI com gerenciamento de foco automático","Indicador visual (ícone check) marca a etapa atual","Estados disabled comunicam visualmente etapas inacessíveis",'A barra de progresso usa role="progressbar" com valores aria'],notes:["Ideal para uso no DialogFooter de Wizards multi-etapas","Navegação para etapas anteriores é sempre permitida, independente de canGoToStep","Combina DropdownMenu + Progress para experiência intuitiva","Use em conjunto com Dialog ou OnboardingDialog para fluxos completos","Os steps são 1-indexed: a primeira etapa é 1, não 0"]})}export{W as default};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import{j as e,W as a,J as i}from"./index-DkiftrvI.js";import{C as s}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function o(){return e.jsx(s,{title:"Switch",description:"Um controle que permite ao usuário alternar entre marcado e desmarcado.",component:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"airplane-mode"}),e.jsx("label",{htmlFor:"airplane-mode",className:"text-sm font-medium",children:"Modo Avião"})]}),usage:`import { Switch, Label } from "forlogic-core"
|
|
2
|
+
|
|
3
|
+
<div className="flex items-center space-x-2">
|
|
4
|
+
<Switch id="airplane-mode" />
|
|
5
|
+
<Label htmlFor="airplane-mode">Modo Avião</Label>
|
|
6
|
+
</div>`,examples:[{title:"Estados",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"off"}),e.jsx(i,{htmlFor:"off",children:"Desligado"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"on",defaultChecked:!0}),e.jsx(i,{htmlFor:"on",children:"Ligado"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"disabled",disabled:!0}),e.jsx(i,{htmlFor:"disabled",className:"text-muted-foreground",children:"Desabilitado Desligado"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"disabled-on",disabled:!0,defaultChecked:!0}),e.jsx(i,{htmlFor:"disabled-on",className:"text-muted-foreground",children:"Desabilitado Ligado"})]})]}),code:`// Desligado
|
|
7
|
+
<Switch id="off" />
|
|
8
|
+
|
|
9
|
+
// Ligado
|
|
10
|
+
<Switch id="on" defaultChecked />
|
|
11
|
+
|
|
12
|
+
// Desabilitado
|
|
13
|
+
<Switch id="disabled" disabled />
|
|
14
|
+
|
|
15
|
+
// Desabilitado e Ligado
|
|
16
|
+
<Switch id="disabled-on" disabled defaultChecked />`},{title:"Com Label",preview:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(a,{id:"airplane-mode2"}),e.jsx(i,{htmlFor:"airplane-mode2",children:"Modo Avião"})]}),code:`import { Switch, Label } from "forlogic-core"
|
|
17
|
+
|
|
18
|
+
<div className="flex items-center space-x-2">
|
|
19
|
+
<Switch id="airplane-mode" />
|
|
20
|
+
<Label htmlFor="airplane-mode">Modo Avião</Label>
|
|
21
|
+
</div>`},{title:"Casos de Uso - Configurações",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(i,{htmlFor:"notifications",children:"Notificações por Email"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Receber emails sobre atividades da sua conta"})]}),e.jsx(a,{id:"notifications",defaultChecked:!0})]}),e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(i,{htmlFor:"marketing",children:"Emails de Marketing"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Receber emails sobre novos produtos e recursos"})]}),e.jsx(a,{id:"marketing"})]}),e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(i,{htmlFor:"security",className:"text-muted-foreground",children:"Alertas de Segurança"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Não pode ser desabilitado por motivos de segurança"})]}),e.jsx(a,{id:"security",defaultChecked:!0,disabled:!0})]})]}),code:`<div className="flex flex-col gap-4">
|
|
22
|
+
<div className="flex items-center justify-between gap-4">
|
|
23
|
+
<div className="space-y-0.5">
|
|
24
|
+
<Label htmlFor="notifications">Notificações por Email</Label>
|
|
25
|
+
<p className="text-sm text-muted-foreground">
|
|
26
|
+
Receber emails sobre atividades
|
|
27
|
+
</p>
|
|
28
|
+
</div>
|
|
29
|
+
<Switch id="notifications" defaultChecked />
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div className="flex items-center justify-between gap-4">
|
|
33
|
+
<div className="space-y-0.5">
|
|
34
|
+
<Label htmlFor="security" className="text-muted-foreground">
|
|
35
|
+
Alertas de Segurança
|
|
36
|
+
</Label>
|
|
37
|
+
<p className="text-sm text-muted-foreground">
|
|
38
|
+
Não pode ser desabilitado
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
<Switch id="security" defaultChecked disabled />
|
|
42
|
+
</div>
|
|
43
|
+
</div>`},{title:"Casos de Uso - Privacidade",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsx(i,{htmlFor:"public-profile",children:"Perfil Público"}),e.jsx(a,{id:"public-profile",defaultChecked:!0})]}),e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsx(i,{htmlFor:"show-email",children:"Mostrar Endereço de Email"}),e.jsx(a,{id:"show-email"})]}),e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsx(i,{htmlFor:"allow-messages",children:"Permitir Mensagens"}),e.jsx(a,{id:"allow-messages",defaultChecked:!0})]})]}),code:`<div className="flex flex-col gap-4">
|
|
44
|
+
<div className="flex items-center justify-between gap-4">
|
|
45
|
+
<Label htmlFor="public-profile">Perfil Público</Label>
|
|
46
|
+
<Switch id="public-profile" defaultChecked />
|
|
47
|
+
</div>
|
|
48
|
+
<div className="flex items-center justify-between gap-4">
|
|
49
|
+
<Label htmlFor="show-email">Mostrar Email</Label>
|
|
50
|
+
<Switch id="show-email" />
|
|
51
|
+
</div>
|
|
52
|
+
<div className="flex items-center justify-between gap-4">
|
|
53
|
+
<Label htmlFor="allow-messages">Permitir Mensagens</Label>
|
|
54
|
+
<Switch id="allow-messages" defaultChecked />
|
|
55
|
+
</div>
|
|
56
|
+
</div>`}],props:[{name:"id",type:"string",default:"-",description:"Identificador único para associar com Label."},{name:"checked",type:"boolean",default:"-",description:"Estado controlado do switch."},{name:"defaultChecked",type:"boolean",default:"false",description:"Estado inicial não controlado."},{name:"disabled",type:"boolean",default:"false",description:"Desabilita a interação."},{name:"required",type:"boolean",default:"false",description:"Indica campo obrigatório em formulário."},{name:"name",type:"string",default:"-",description:"Nome do campo para submissão de formulário."},{name:"value",type:"string",default:'"on"',description:"Valor enviado quando marcado."},{name:"onCheckedChange",type:"(checked: boolean) => void",default:"-",description:"Callback quando o estado muda."}],accessibility:['Role "switch" aplicado automaticamente (WAI-ARIA)',"Suporte completo de teclado (Espaço para alternar)","Estados aria-checked comunicados para leitores de tela","Associação com Label via htmlFor/id","Indicadores visuais de foco visíveis","Estado desabilitado comunicado via aria-disabled"]})}export{o as SwitchDoc};
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import{j as e,T as t,d5 as R,i,k as l,l as s,p as n,q as a,r,n as v,s as o}from"./index-DkiftrvI.js";import{C as f}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function S(){const[c,H]=r.useState(150),[m,g]=r.useState(200),[T,b]=r.useState(null),h=d=>x=>{x.preventDefault(),b(d);const N=x.clientX,u=d===1?c:m,j=w=>{const C=w.clientX-N;d===1?H(Math.max(80,u+C)):g(Math.max(100,u+C))},p=()=>{b(null),document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",p)};document.addEventListener("mousemove",j),document.addEventListener("mouseup",p)};return e.jsx("div",{className:"rounded-md border overflow-hidden",children:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsxs(s,{style:{width:c},className:"relative",children:["Nome",e.jsx(v,{direction:"horizontal",onMouseDown:h(1),isDragging:T===1})]}),e.jsxs(s,{style:{width:m},className:"relative",children:["Email",e.jsx(v,{direction:"horizontal",onMouseDown:h(2),isDragging:T===2})]}),e.jsx(s,{children:"Status"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"joao.silva@example.com"}),e.jsx(a,{children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{children:"Maria Santos"}),e.jsx(a,{children:"maria.santos@example.com"}),e.jsx(a,{children:"Ativo"})]})]})]})})}function M(){return e.jsx("div",{className:"rounded-md border overflow-hidden",children:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{className:"w-[100px]",children:"ID"}),e.jsx(s,{className:"w-[150px]",children:"Nome"}),e.jsx(s,{className:"w-[200px]",children:"Descrição"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{children:"001"}),e.jsx(a,{children:e.jsx(o,{children:"João da Silva Santos"})}),e.jsx(a,{children:e.jsx(o,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore."})})]}),e.jsxs(l,{children:[e.jsx(a,{children:"002"}),e.jsx(a,{children:e.jsx(o,{children:"Maria"})}),e.jsx(a,{children:e.jsx(o,{children:"Descrição curta"})})]}),e.jsxs(l,{children:[e.jsx(a,{children:"003"}),e.jsx(a,{children:e.jsx(o,{children:"Pedro Henrique Costa Oliveira"})}),e.jsx(a,{children:e.jsx(o,{children:"Esta é uma descrição muito longa que será truncada automaticamente e mostrará um tooltip quando o usuário passar o mouse sobre o texto."})})]})]})]})})}function z(){return e.jsx(f,{title:"Table",description:"Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.",component:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{children:"Nome"}),e.jsx(s,{children:"Status"})]})}),e.jsx(n,{children:e.jsxs(l,{children:[e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"Ativo"})]})})]}),usage:`import {
|
|
2
|
+
Table,
|
|
3
|
+
TableBody,
|
|
4
|
+
TableCaption,
|
|
5
|
+
TableCell,
|
|
6
|
+
TableHead,
|
|
7
|
+
TableHeader,
|
|
8
|
+
TableRow,
|
|
9
|
+
TableResizeHandle,
|
|
10
|
+
TruncatedCell,
|
|
11
|
+
} from "forlogic-core"
|
|
12
|
+
|
|
13
|
+
<Table>
|
|
14
|
+
<TableCaption>Lista de usuários</TableCaption>
|
|
15
|
+
<TableHeader>
|
|
16
|
+
<TableRow>
|
|
17
|
+
<TableHead>Nome</TableHead>
|
|
18
|
+
<TableHead>Email</TableHead>
|
|
19
|
+
<TableHead>Status</TableHead>
|
|
20
|
+
</TableRow>
|
|
21
|
+
</TableHeader>
|
|
22
|
+
<TableBody>
|
|
23
|
+
<TableRow>
|
|
24
|
+
<TableCell>João Silva</TableCell>
|
|
25
|
+
<TableCell>joao@example.com</TableCell>
|
|
26
|
+
<TableCell>Ativo</TableCell>
|
|
27
|
+
</TableRow>
|
|
28
|
+
</TableBody>
|
|
29
|
+
</Table>`,examples:[{title:"Tabela Básica",preview:e.jsxs(t,{children:[e.jsx(R,{children:"Lista de usuários recentes"}),e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{className:"w-[100px]",children:"ID"}),e.jsx(s,{children:"Nome"}),e.jsx(s,{children:"Email"}),e.jsx(s,{className:"text-right",children:"Status"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"001"}),e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"joao@example.com"}),e.jsx(a,{className:"text-right",children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"002"}),e.jsx(a,{children:"Maria Santos"}),e.jsx(a,{children:"maria@example.com"}),e.jsx(a,{className:"text-right",children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"003"}),e.jsx(a,{children:"Pedro Costa"}),e.jsx(a,{children:"pedro@example.com"}),e.jsx(a,{className:"text-right",children:"Inativo"})]})]})]}),code:`<Table>
|
|
30
|
+
<TableCaption>Lista de usuários recentes</TableCaption>
|
|
31
|
+
<TableHeader>
|
|
32
|
+
<TableRow>
|
|
33
|
+
<TableHead className="w-[100px]">ID</TableHead>
|
|
34
|
+
<TableHead>Nome</TableHead>
|
|
35
|
+
<TableHead>Email</TableHead>
|
|
36
|
+
<TableHead className="text-right">Status</TableHead>
|
|
37
|
+
</TableRow>
|
|
38
|
+
</TableHeader>
|
|
39
|
+
<TableBody>
|
|
40
|
+
<TableRow>
|
|
41
|
+
<TableCell className="font-medium">001</TableCell>
|
|
42
|
+
<TableCell>João Silva</TableCell>
|
|
43
|
+
<TableCell>joao@example.com</TableCell>
|
|
44
|
+
<TableCell className="text-right">Ativo</TableCell>
|
|
45
|
+
</TableRow>
|
|
46
|
+
</TableBody>
|
|
47
|
+
</Table>`},{title:"TableResizeHandle - Colunas Redimensionáveis",description:"Arraste a borda entre as colunas para redimensionar.",preview:e.jsx(S,{}),code:`const [colWidth, setColWidth] = useState(150);
|
|
48
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
49
|
+
|
|
50
|
+
const handleMouseDown = (e: React.MouseEvent) => {
|
|
51
|
+
setIsDragging(true);
|
|
52
|
+
const startX = e.clientX;
|
|
53
|
+
const startWidth = colWidth;
|
|
54
|
+
|
|
55
|
+
const handleMouseMove = (moveEvent: MouseEvent) => {
|
|
56
|
+
const delta = moveEvent.clientX - startX;
|
|
57
|
+
setColWidth(Math.max(80, startWidth + delta));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const handleMouseUp = () => {
|
|
61
|
+
setIsDragging(false);
|
|
62
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
63
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
67
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
<Table>
|
|
71
|
+
<TableHeader>
|
|
72
|
+
<TableRow>
|
|
73
|
+
<TableHead style={{ width: colWidth }} className="relative">
|
|
74
|
+
Nome
|
|
75
|
+
<TableResizeHandle
|
|
76
|
+
direction="horizontal"
|
|
77
|
+
onMouseDown={handleMouseDown}
|
|
78
|
+
isDragging={isDragging}
|
|
79
|
+
/>
|
|
80
|
+
</TableHead>
|
|
81
|
+
<TableHead>Email</TableHead>
|
|
82
|
+
</TableRow>
|
|
83
|
+
</TableHeader>
|
|
84
|
+
<TableBody>
|
|
85
|
+
<TableRow>
|
|
86
|
+
<TableCell>João Silva</TableCell>
|
|
87
|
+
<TableCell>joao@example.com</TableCell>
|
|
88
|
+
</TableRow>
|
|
89
|
+
</TableBody>
|
|
90
|
+
</Table>`},{title:"TruncatedCell - Texto Truncado com Tooltip",description:"Passe o mouse sobre células com texto longo para ver o conteúdo completo.",preview:e.jsx(M,{}),code:`<Table>
|
|
91
|
+
<TableHeader>
|
|
92
|
+
<TableRow>
|
|
93
|
+
<TableHead className="w-[100px]">ID</TableHead>
|
|
94
|
+
<TableHead className="w-[150px]">Nome</TableHead>
|
|
95
|
+
<TableHead className="w-[200px]">Descrição</TableHead>
|
|
96
|
+
</TableRow>
|
|
97
|
+
</TableHeader>
|
|
98
|
+
<TableBody>
|
|
99
|
+
<TableRow>
|
|
100
|
+
<TableCell>001</TableCell>
|
|
101
|
+
<TableCell>
|
|
102
|
+
<TruncatedCell>João da Silva Santos</TruncatedCell>
|
|
103
|
+
</TableCell>
|
|
104
|
+
<TableCell>
|
|
105
|
+
<TruncatedCell>
|
|
106
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
|
|
107
|
+
</TruncatedCell>
|
|
108
|
+
</TableCell>
|
|
109
|
+
</TableRow>
|
|
110
|
+
</TableBody>
|
|
111
|
+
</Table>`},{title:"Tabela com Valores Monetários",preview:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{children:"Fatura"}),e.jsx(s,{children:"Status"}),e.jsx(s,{children:"Método"}),e.jsx(s,{className:"text-right",children:"Valor"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV001"}),e.jsx(a,{children:"Pago"}),e.jsx(a,{children:"Cartão de Crédito"}),e.jsx(a,{className:"text-right",children:"R$ 250,00"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV002"}),e.jsx(a,{children:"Pendente"}),e.jsx(a,{children:"PayPal"}),e.jsx(a,{className:"text-right",children:"R$ 150,00"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV003"}),e.jsx(a,{children:"Não Pago"}),e.jsx(a,{children:"Transferência"}),e.jsx(a,{className:"text-right",children:"R$ 350,00"})]})]})]}),code:`<Table>
|
|
112
|
+
<TableHeader>
|
|
113
|
+
<TableRow>
|
|
114
|
+
<TableHead>Fatura</TableHead>
|
|
115
|
+
<TableHead>Status</TableHead>
|
|
116
|
+
<TableHead>Método</TableHead>
|
|
117
|
+
<TableHead className="text-right">Valor</TableHead>
|
|
118
|
+
</TableRow>
|
|
119
|
+
</TableHeader>
|
|
120
|
+
<TableBody>
|
|
121
|
+
<TableRow>
|
|
122
|
+
<TableCell className="font-medium">INV001</TableCell>
|
|
123
|
+
<TableCell>Pago</TableCell>
|
|
124
|
+
<TableCell>Cartão de Crédito</TableCell>
|
|
125
|
+
<TableCell className="text-right">R$ 250,00</TableCell>
|
|
126
|
+
</TableRow>
|
|
127
|
+
</TableBody>
|
|
128
|
+
</Table>`}],props:[{name:"className",type:"string",default:"-",description:"Classes CSS adicionais para a tabela."},{name:"TableResizeHandle.direction",type:'"horizontal" | "vertical"',default:"-",description:"Direção do redimensionamento (colunas ou linhas)."},{name:"TableResizeHandle.onMouseDown",type:"(e: MouseEvent) => void",default:"-",description:"Handler para iniciar o redimensionamento."},{name:"TableResizeHandle.isDragging",type:"boolean",default:"false",description:"Se o handle está sendo arrastado (altera visual)."},{name:"TruncatedCell.children",type:"ReactNode",default:"-",description:"Conteúdo a ser truncado."},{name:"TruncatedCell.className",type:"string",default:"-",description:"Classes CSS adicionais."}],notes:["TableResizeHandle deve ser posicionado dentro de um TableHead com position: relative.","TruncatedCell detecta automaticamente se o texto está truncado e exibe tooltip apenas quando necessário.","Use larguras fixas (w-[Xpx]) nos TableHead para melhor controle do layout.","TruncatedCell usa CSS text-overflow: ellipsis internamente."],accessibility:["Usa elementos HTML semânticos de tabela","Suporta navegação por teclado","TableCaption fornece contexto para leitores de tela","TableHeader define cabeçalhos de coluna apropriados","TruncatedCell mostra tooltip acessível com conteúdo completo","TableResizeHandle suporta interação via teclado","Funciona com leitores de tela"]})}export{z as TableDoc};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import{j as a,aG as u,o as r,w as b,a5 as i,a6 as l,a7 as t,aa as o,x as d}from"./index-DkiftrvI.js";import{C as p}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function m({children:s,className:e}){return a.jsx("div",{className:r("flex flex-col h-full",e),children:a.jsx(u,{className:"flex-1",children:a.jsx("div",{className:"space-y-6 p-6",children:s})})})}function T({title:s,description:e,actions:n,className:c}){return a.jsxs("div",{className:r("space-y-4",c),children:[a.jsxs("div",{className:"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",children:[a.jsxs("div",{className:"space-y-1",children:[a.jsx("h2",{className:"text-2xl font-bold tracking-tight",children:s}),e&&a.jsx("p",{className:"text-muted-foreground text-sm",children:e})]}),n&&a.jsx("div",{className:"flex items-center gap-2 flex-wrap",children:n})]}),a.jsx(b,{})]})}function g({children:s,className:e}){return a.jsx("div",{className:r("space-y-6",e),children:s})}function h(){return a.jsx(p,{title:"Tabs & TabPageLayout",description:"Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout para páginas completas com header fixo e scroll.",component:a.jsxs(i,{defaultValue:"account",className:"w-[400px]",children:[a.jsxs(l,{children:[a.jsx(t,{value:"account",children:"Conta"}),a.jsx(t,{value:"password",children:"Senha"})]}),a.jsx(o,{value:"account"}),a.jsx(o,{value:"password"})]}),usage:`import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
|
|
2
|
+
|
|
3
|
+
<Tabs defaultValue="account">
|
|
4
|
+
<TabsList>
|
|
5
|
+
<TabsTrigger value="account">Conta</TabsTrigger>
|
|
6
|
+
<TabsTrigger value="password">Senha</TabsTrigger>
|
|
7
|
+
</TabsList>
|
|
8
|
+
<TabsContent value="account">
|
|
9
|
+
Faça alterações na sua conta aqui.
|
|
10
|
+
</TabsContent>
|
|
11
|
+
<TabsContent value="password">
|
|
12
|
+
Altere sua senha aqui.
|
|
13
|
+
</TabsContent>
|
|
14
|
+
</Tabs>`,examples:[{title:"Basic Tabs",preview:a.jsxs(i,{defaultValue:"tab1",className:"w-[400px]",children:[a.jsxs(l,{children:[a.jsx(t,{value:"tab1",children:"Tab 1"}),a.jsx(t,{value:"tab2",children:"Tab 2"}),a.jsx(t,{value:"tab3",children:"Tab 3"})]}),a.jsx(o,{value:"tab1"}),a.jsx(o,{value:"tab2"}),a.jsx(o,{value:"tab3"})]}),code:`<Tabs defaultValue="tab1">
|
|
15
|
+
<TabsList>
|
|
16
|
+
<TabsTrigger value="tab1">Aba 1</TabsTrigger>
|
|
17
|
+
<TabsTrigger value="tab2">Aba 2</TabsTrigger>
|
|
18
|
+
</TabsList>
|
|
19
|
+
<TabsContent value="tab1">Conteúdo 1</TabsContent>
|
|
20
|
+
<TabsContent value="tab2">Conteúdo 2</TabsContent>
|
|
21
|
+
</Tabs>`},{title:"TabPageLayout",description:"Layout padronizado para páginas dentro de tabs com header, ações e conteúdo scrollável",preview:a.jsx("div",{className:"w-full h-80 border rounded-lg overflow-hidden bg-background",children:a.jsxs(m,{children:[a.jsx(T,{title:"Configurações",description:"Gerencie as configurações do sistema",actions:a.jsxs(a.Fragment,{children:[a.jsx(d,{variant:"outline",size:"sm",children:"Cancelar"}),a.jsx(d,{size:"sm",children:"Salvar"})]})}),a.jsx(g,{children:a.jsx("div",{className:"space-y-4",children:Array.from({length:6}).map((s,e)=>a.jsxs("div",{className:"p-4 border rounded-md",children:[a.jsxs("h4",{className:"font-medium",children:["Seção ",e+1]}),a.jsxs("p",{className:"text-sm text-muted-foreground mt-1",children:["Conteúdo da seção ",e+1]})]},e))})})]})}),code:`import {
|
|
22
|
+
TabPageLayout,
|
|
23
|
+
TabPageHeader,
|
|
24
|
+
TabPageContent
|
|
25
|
+
} from "forlogic-core"
|
|
26
|
+
|
|
27
|
+
<TabPageLayout>
|
|
28
|
+
<TabPageHeader
|
|
29
|
+
title="Configurações"
|
|
30
|
+
description="Gerencie as configurações do sistema"
|
|
31
|
+
actions={
|
|
32
|
+
<>
|
|
33
|
+
<Button variant="outline">Cancelar</Button>
|
|
34
|
+
<Button>Salvar</Button>
|
|
35
|
+
</>
|
|
36
|
+
}
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<TabPageContent>
|
|
40
|
+
<div>Seu conteúdo aqui...</div>
|
|
41
|
+
</TabPageContent>
|
|
42
|
+
</TabPageLayout>`}],props:[{name:"defaultValue",type:"string",default:"-",description:"O valor da aba que deve estar ativa por padrão."},{name:"value",type:"string",default:"-",description:"O valor controlado da aba ativa."},{name:"onValueChange",type:"(value: string) => void",default:"-",description:"Manipulador de evento quando a aba ativa muda."},{name:"TabPageHeader.title",type:"string | ReactNode",default:"-",description:"Título do header."},{name:"TabPageHeader.description",type:"string",default:"-",description:"Descrição opcional."},{name:"TabPageHeader.actions",type:"ReactNode",default:"-",description:"Ações (botões) do header."}],accessibility:["Navegação completa por teclado (teclas de seta para navegar entre abas)","Segue o padrão WAI-ARIA de tabs","Gerenciamento adequado de foco","Anúncios para leitores de tela"],notes:["**Tabs** é ideal para alternar entre visualizações simples","**TabPageLayout** é ideal para páginas dentro de tabs com header fixo e scroll","TabPageLayout inclui separador automático e scroll area","Para barras de menu estilo desktop, veja o componente **Menubar**"]})}export{h as TabsDoc};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import{r as t,j as e,eP as M,aH as U,bp as k,aI as A,a8 as q,e3 as O,a1 as P,o as v,ew as H,E as B,G as F,H as V,I as z,X as G,x as N}from"./index-DkiftrvI.js";import{E as n}from"./ExampleCard-DuLrb3t-.js";function c({users:o,value:s,onChange:l,disabled:x=!1,placeholder:g="Buscar membro da equipe...",confirmRemoval:h=!0,confirmTitle:b="Remover da equipe",confirmMessage:S="Tem certeza que deseja remover este membro da equipe?",emptyMessage:C="Nenhum membro na equipe",className:w}){const[T,f]=t.useState(""),[E,m]=t.useState(!1),[p,j]=t.useState(null),r=t.useMemo(()=>new Set(s),[s]),u=t.useMemo(()=>o.filter(a=>r.has(a.id)),[o,r]),y=t.useMemo(()=>o.filter(a=>!r.has(a.id)).map(a=>({value:a.id,label:a.name})),[o,r]),I=t.useCallback(a=>{!a||r.has(a)||(l([...s,a]),f(""))},[s,l,r]),R=t.useCallback(a=>{h?(j(a),m(!0)):l(s.filter(i=>i!==a))},[s,l,h]),D=t.useCallback(()=>{p&&l(s.filter(a=>a!==p)),m(!1),j(null)},[p,s,l]);return e.jsxs("div",{className:v("space-y-3",w),children:[e.jsx("div",{className:"flex items-start gap-3",children:e.jsx("div",{className:"flex-1",children:e.jsx(M,{options:y,value:T,onValueChange:a=>{const i=typeof a=="string"?a:a?.[0]??"";f(i),i&&I(i)},placeholder:g,searchPlaceholder:"Buscar...",disabled:x})})}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Selecionados"}),e.jsx("span",{className:"text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5 font-medium",children:u.length})]}),u.length>0?e.jsx("div",{className:"space-y-2",children:u.map(a=>e.jsxs("div",{className:"flex items-center border border-border rounded-lg p-2 gap-3",children:[e.jsxs(U,{className:"h-8 w-8 shrink-0",children:[a.avatar&&e.jsx(k,{src:a.avatar,alt:a.name}),e.jsx(A,{className:"text-xs",children:a.name?.substring(0,2).toUpperCase()})]}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsx("p",{className:"text-sm font-medium truncate",title:a.name,dangerouslySetInnerHTML:{__html:a.title||a.name}})}),e.jsxs("div",{className:"flex items-center gap-2 shrink-0 text-xs text-muted-foreground",children:[a.roleName&&e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(q,{className:"h-3.5 w-3.5"}),e.jsx("span",{className:"truncate max-w-[120px]",children:a.roleName})]}),a.placeName&&e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(O,{className:"h-3.5 w-3.5"}),e.jsx("span",{className:"truncate max-w-[120px]",children:a.placeName})]}),e.jsx("button",{type:"button",className:v("text-muted-foreground hover:text-destructive transition-colors",x&&"opacity-50 pointer-events-none"),onClick:()=>!x&&R(a.id),title:"Remover",children:e.jsx(P,{className:"h-4 w-4"})})]})]},a.id))}):e.jsxs("div",{className:"flex flex-col items-center justify-center py-8 text-muted-foreground",children:[e.jsx(H,{className:"h-12 w-12 mb-2 opacity-30"}),e.jsx("p",{className:"text-sm",children:C})]}),e.jsx(B,{open:E,onOpenChange:m,children:e.jsxs(F,{className:"sm:max-w-[400px]",children:[e.jsx(V,{children:e.jsx(z,{children:b})}),e.jsx("p",{className:"text-sm text-muted-foreground",children:S}),e.jsxs(G,{children:[e.jsx(N,{variant:"ghost",onClick:()=>m(!1),children:"Cancelar"}),e.jsx(N,{variant:"destructive",onClick:D,children:"Remover"})]})]})})]})}const d=[{id:"u1",name:"João Silva",email:"joao@example.com",title:"<b>João Silva</b> - Analista de Qualidade",roleName:"Analista",placeName:"São Paulo"},{id:"u2",name:"Maria Santos",email:"maria@example.com",title:"<b>Maria Santos</b> - Gerente de Produção",roleName:"Gerente",placeName:"Campinas"},{id:"u3",name:"Carlos Mendes",email:"carlos@example.com",title:"<b>Carlos Mendes</b> - Engenheiro",roleName:"Engenheiro"},{id:"u4",name:"Ana Costa",email:"ana@example.com",title:"<b>Ana Costa</b> - Coordenadora",placeName:"Rio de Janeiro"},{id:"u5",name:"Pedro Oliveira",email:"pedro@example.com",title:"<b>Pedro Oliveira</b> - Técnico",roleName:"Técnico",placeName:"BH"},{id:"u6",name:"Fernanda Lima",email:"fernanda@example.com",title:"<b>Fernanda Lima</b> - Auditora"}];function J(){const[o,s]=t.useState(["u1","u2"]);return e.jsx("div",{className:"max-w-xl",children:e.jsx(c,{users:d,value:o,onChange:s})})}function L(){const[o,s]=t.useState([]);return e.jsx("div",{className:"max-w-xl",children:e.jsx(c,{users:d,value:o,onChange:s})})}function _(){const[o,s]=t.useState(["u3"]);return e.jsx("div",{className:"max-w-xl",children:e.jsx(c,{users:d,value:o,onChange:s,confirmRemoval:!1})})}function X(){return e.jsx("div",{className:"max-w-xl",children:e.jsx(c,{users:d,value:["u1","u4"],onChange:()=>{},disabled:!0})})}function W(){return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold mb-2",children:"Team Selector (Seletor de Equipe)"}),e.jsxs("p",{className:"text-muted-foreground",children:["Seleção de membros de equipe portado de ",e.jsx("code",{children:"flc-team"})," (v2). Multiselect com chips, avatar, role/place e confirmação."]})]}),e.jsx(n,{title:"Com membros pré-selecionados",description:"TeamSelector com 2 membros já selecionados.",preview:e.jsx(J,{}),code:"<TeamSelector users={users} value={selectedIds} onChange={setSelectedIds} />"}),e.jsx(n,{title:"Vazio",description:"Estado vazio com mensagem padrão.",preview:e.jsx(L,{}),code:"<TeamSelector users={users} value={[]} onChange={setIds} />"}),e.jsx(n,{title:"Sem confirmação de remoção",description:"Remoção direta sem dialog.",preview:e.jsx(_,{}),code:"<TeamSelector users={users} value={ids} onChange={setIds} confirmRemoval={false} />"}),e.jsx(n,{title:"Desabilitado",description:"Estado disabled.",preview:e.jsx(X,{}),code:"<TeamSelector users={users} value={['u1']} onChange={() => {}} disabled />"}),e.jsx(n,{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 { TeamSelector } from 'forlogic-core';
|
|
2
|
+
import type { TeamUser } from 'forlogic-core';`}),code:`import { TeamSelector } from 'forlogic-core';
|
|
3
|
+
import type { TeamUser } from 'forlogic-core';
|
|
4
|
+
|
|
5
|
+
<TeamSelector
|
|
6
|
+
users={availableUsers}
|
|
7
|
+
value={selectedUserIds}
|
|
8
|
+
onChange={setSelectedUserIds}
|
|
9
|
+
confirmRemoval={true}
|
|
10
|
+
/>`})]})}export{W as TeamSelectorDoc};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{r as c,j as e,E as O,G as C,H as y,I as T,aG as U,x as d,aU as S,X as k,F as A,a1 as D,o as V,a as h,b as x,c as p,e as f,d as j,Y as w}from"./index-DkiftrvI.js";import{S as z}from"./shield-check-CFXjOV_w.js";function I(s,o=""){const n=atob(s),i=[];for(let r=0;r<n.length;r+=512){const t=n.slice(r,r+512),l=new Array(t.length);for(let a=0;a<t.length;a++)l[a]=t.charCodeAt(a);i.push(new Uint8Array(l))}const m=new Blob(i,{type:o});return URL.createObjectURL(m)}function L({term:s,open:o,onClose:n,onAgree:i,title:m="Termos de Uso Atualizados",seeLaterLabel:r="Ver depois",agreeLabel:t="Li e concordo",viewTermLabel:l="Visualizar termo de uso"}){const[a,u]=c.useState(!1),g=c.useCallback(()=>{i(s.id)},[i,s.id]);return e.jsxs(e.Fragment,{children:[e.jsx(O,{open:o&&!a,onOpenChange:v=>!v&&n(),children:e.jsxs(C,{className:"sm:max-w-md",children:[e.jsx(y,{children:e.jsxs(T,{className:"flex items-center gap-2",children:[e.jsx(z,{className:"h-5 w-5 text-primary"}),m]})}),e.jsxs("div",{className:"space-y-4",children:[s.description&&e.jsx(U,{className:"max-h-48",children:e.jsx("div",{className:"text-sm text-muted-foreground prose prose-sm max-w-none",dangerouslySetInnerHTML:{__html:s.description}})}),s.file&&e.jsxs(d,{variant:"link",className:"px-0 text-primary",onClick:()=>u(!0),children:[e.jsx(S,{className:"mr-1 h-4 w-4"}),l]})]}),e.jsxs(k,{className:"gap-2 sm:gap-0",children:[e.jsx(d,{variant:"ghost",onClick:n,children:r}),e.jsx(d,{onClick:g,children:t})]})]})}),a&&e.jsx(N,{term:s,open:a,onClose:()=>u(!1),viewOnly:!0})]})}function N({term:s,open:o,onClose:n,onSign:i,viewOnly:m=!1,title:r="Termos de Uso",signLabel:t="Li e concordo"}){const l=c.useMemo(()=>s.file?I(s.file,s.type):null,[s.file,s.type]),a=c.useCallback(()=>{l&&URL.revokeObjectURL(l),n()},[l,n]),u=c.useCallback(()=>{if(s.hasUserSignature){a();return}i?.(s.id)},[s,i,a]),g=!m&&!s.hasUserSignature&&i;return e.jsx(O,{open:o,onOpenChange:v=>!v&&a(),children:e.jsxs(C,{className:V("flex flex-col p-0 sm:max-w-[80vw] h-[95vh]","[&>button.absolute]:hidden"),children:[e.jsxs("div",{className:"flex items-center justify-between border-b px-4 py-3",children:[e.jsxs("h2",{className:"flex items-center gap-2 text-lg font-semibold",children:[e.jsx(A,{className:"h-5 w-5 text-primary"}),r]}),e.jsxs("div",{className:"flex items-center gap-2",children:[g&&e.jsx(d,{size:"sm",onClick:u,children:t}),e.jsx(d,{variant:"ghost",size:"icon",onClick:a,children:e.jsx(D,{className:"h-4 w-4"})})]})]}),e.jsx("div",{className:"flex-1 min-h-0",children:s.file&&l?e.jsx("iframe",{className:"h-full w-full border-0",src:l,title:r}):e.jsx("div",{className:"flex h-full items-center justify-center text-muted-foreground",children:e.jsx("p",{children:"Nenhum termo de uso ativo encontrado."})})})]})})}const b={id:"term-001",description:"<p>Os termos de uso foram atualizados. Por favor, leia e aceite para continuar utilizando a plataforma.</p><ul><li>Nova política de privacidade</li><li>Atualizações nos termos de serviço</li></ul>",file:btoa('<html><body style="font-family:sans-serif;padding:2rem"><h1>Termos de Uso</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><h2>1. Aceitação</h2><p>Ao utilizar nossos serviços, você concorda com estes termos.</p><h2>2. Privacidade</h2><p>Seus dados serão tratados conforme nossa política de privacidade.</p><h2>3. Responsabilidades</h2><p>O usuário é responsável pela veracidade das informações fornecidas.</p></body></html>'),type:"text/html",hasUserSignature:!1},E={...b,id:"term-002",hasUserSignature:!0};function P(){const[s,o]=c.useState(!1),[n,i]=c.useState(!1),[m,r]=c.useState(!1),[t,l]=c.useState(!1);return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold",children:"Terms of Use"}),e.jsx("p",{className:"text-muted-foreground mt-2",children:"Componentes para exibir e gerenciar termos de uso. Inclui um dialog de notificação e um viewer full-screen para visualização do documento."})]}),e.jsxs(h,{children:[e.jsxs(x,{children:[e.jsx(p,{children:"TermsOfUseDialog"}),e.jsx(f,{children:"Dialog de notificação que aparece quando há termos de uso atualizados. Mostra descrição, link para visualizar o documento completo, e botões de ação."})]}),e.jsxs(j,{className:"space-y-4",children:[e.jsx(d,{onClick:()=>o(!0),children:"Abrir Dialog"}),e.jsx(L,{term:b,open:s,onClose:()=>o(!1),onAgree:a=>{w.success(`Termo ${a} aceito!`),o(!1)}}),e.jsx("pre",{className:"bg-muted p-4 rounded-md text-xs overflow-auto",children:`<TermsOfUseDialog
|
|
2
|
+
term={term}
|
|
3
|
+
open={open}
|
|
4
|
+
onClose={() => setOpen(false)}
|
|
5
|
+
onAgree={(termId) => handleAgree(termId)}
|
|
6
|
+
/>`})]})]}),e.jsxs(h,{children:[e.jsxs(x,{children:[e.jsx(p,{children:"TermsOfUseViewer — Somente Leitura"}),e.jsxs(f,{children:["Viewer full-screen com iframe para visualizar o documento. Modo ",e.jsx("code",{children:"viewOnly"})," oculta o botão de assinatura."]})]}),e.jsxs(j,{className:"space-y-4",children:[e.jsx(d,{variant:"outline",onClick:()=>i(!0),children:"Abrir Viewer (View Only)"}),e.jsx(N,{term:b,open:n,onClose:()=>i(!1),viewOnly:!0}),e.jsx("pre",{className:"bg-muted p-4 rounded-md text-xs overflow-auto",children:`<TermsOfUseViewer
|
|
7
|
+
term={term}
|
|
8
|
+
open={open}
|
|
9
|
+
onClose={() => setOpen(false)}
|
|
10
|
+
viewOnly
|
|
11
|
+
/>`})]})]}),e.jsxs(h,{children:[e.jsxs(x,{children:[e.jsx(p,{children:"TermsOfUseViewer — Com Assinatura"}),e.jsxs(f,{children:["Quando ",e.jsx("code",{children:"viewOnly=false"}),' e o usuário ainda não assinou, exibe o botão "Li e concordo".']})]}),e.jsxs(j,{className:"space-y-4",children:[e.jsx(d,{variant:"outline",onClick:()=>r(!0),children:"Abrir Viewer (Sign)"}),e.jsx(N,{term:b,open:m,onClose:()=>r(!1),onSign:a=>{w.success(`Termo ${a} assinado!`),r(!1)}}),e.jsx("pre",{className:"bg-muted p-4 rounded-md text-xs overflow-auto",children:`<TermsOfUseViewer
|
|
12
|
+
term={term}
|
|
13
|
+
open={open}
|
|
14
|
+
onClose={() => setOpen(false)}
|
|
15
|
+
onSign={(termId) => handleSign(termId)}
|
|
16
|
+
/>`})]})]}),e.jsxs(h,{children:[e.jsxs(x,{children:[e.jsx(p,{children:"TermsOfUseViewer — Já Assinado"}),e.jsxs(f,{children:["Quando ",e.jsx("code",{children:"hasUserSignature=true"}),", o botão de assinatura fica oculto automaticamente."]})]}),e.jsxs(j,{className:"space-y-4",children:[e.jsx(d,{variant:"outline",onClick:()=>l(!0),children:"Abrir Viewer (Signed)"}),e.jsx(N,{term:E,open:t,onClose:()=>l(!1),onSign:()=>{}})]})]}),e.jsxs(h,{children:[e.jsx(x,{children:e.jsx(p,{children:"Props"})}),e.jsxs(j,{children:[e.jsx("h3",{className:"font-semibold mb-2",children:"TermOfUse (interface)"}),e.jsx("div",{className:"overflow-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",children:"Prop"}),e.jsx("th",{className:"text-left p-2",children:"Tipo"}),e.jsx("th",{className:"text-left p-2",children:"Descrição"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"id"}),e.jsx("td",{className:"p-2",children:"string"}),e.jsx("td",{className:"p-2",children:"Identificador único"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"description"}),e.jsx("td",{className:"p-2",children:"string?"}),e.jsx("td",{className:"p-2",children:"HTML com descrição/resumo"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"file"}),e.jsx("td",{className:"p-2",children:"string?"}),e.jsx("td",{className:"p-2",children:"Conteúdo do arquivo em base64"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"type"}),e.jsx("td",{className:"p-2",children:"string?"}),e.jsx("td",{className:"p-2",children:"MIME type do arquivo"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"hasUserSignature"}),e.jsx("td",{className:"p-2",children:"boolean?"}),e.jsx("td",{className:"p-2",children:"Se o usuário já assinou"})]})]})]})}),e.jsx("h3",{className:"font-semibold mt-6 mb-2",children:"TermsOfUseDialog"}),e.jsx("div",{className:"overflow-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",children:"Prop"}),e.jsx("th",{className:"text-left p-2",children:"Tipo"}),e.jsx("th",{className:"text-left p-2",children:"Descrição"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"term"}),e.jsx("td",{className:"p-2",children:"TermOfUse"}),e.jsx("td",{className:"p-2",children:"Termo a exibir"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"open"}),e.jsx("td",{className:"p-2",children:"boolean"}),e.jsx("td",{className:"p-2",children:"Controla visibilidade"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"onClose"}),e.jsx("td",{className:"p-2",children:"() => void"}),e.jsx("td",{className:"p-2",children:"Callback ao fechar"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"onAgree"}),e.jsx("td",{className:"p-2",children:"(termId) => void"}),e.jsx("td",{className:"p-2",children:"Callback ao concordar"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"title"}),e.jsx("td",{className:"p-2",children:"string?"}),e.jsx("td",{className:"p-2",children:"Título customizado"})]})]})]})}),e.jsx("h3",{className:"font-semibold mt-6 mb-2",children:"TermsOfUseViewer"}),e.jsx("div",{className:"overflow-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",children:"Prop"}),e.jsx("th",{className:"text-left p-2",children:"Tipo"}),e.jsx("th",{className:"text-left p-2",children:"Descrição"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"term"}),e.jsx("td",{className:"p-2",children:"TermOfUse"}),e.jsx("td",{className:"p-2",children:"Termo a exibir"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"open"}),e.jsx("td",{className:"p-2",children:"boolean"}),e.jsx("td",{className:"p-2",children:"Controla visibilidade"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"onClose"}),e.jsx("td",{className:"p-2",children:"() => void"}),e.jsx("td",{className:"p-2",children:"Callback ao fechar"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"onSign"}),e.jsx("td",{className:"p-2",children:"(termId) => void?"}),e.jsx("td",{className:"p-2",children:"Callback ao assinar"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-2 font-mono",children:"viewOnly"}),e.jsx("td",{className:"p-2",children:"boolean?"}),e.jsx("td",{className:"p-2",children:"Oculta botão de assinatura"})]})]})]})})]})]})]})}export{P as TermsOfUseDoc};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import{j as e,M as a,r as d,J as t,x as c}from"./index-DkiftrvI.js";import{C as m}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function h(){return e.jsx(m,{title:"Textarea",description:"Exibe um textarea de formulário ou um componente que se parece com um textarea.",component:e.jsx(a,{placeholder:"Digite sua mensagem aqui.",className:"w-full max-w-md"}),usage:`import { Textarea } from "forlogic-core"
|
|
2
|
+
|
|
3
|
+
<Textarea placeholder="Digite sua mensagem aqui." />`,examples:[{title:"Padrão",preview:e.jsx(a,{placeholder:"Digite sua mensagem aqui.",className:"max-w-md"}),code:'<Textarea placeholder="Digite sua mensagem aqui." />'},{title:"Com Contador de Caracteres",preview:(()=>{const[s,l]=d.useState(""),r=200;return e.jsxs("div",{className:"space-y-2 max-w-md",children:[e.jsx(a,{placeholder:"Digite sua mensagem...",value:s,onChange:o=>l(o.target.value),maxLength:r}),e.jsxs("div",{className:"flex justify-end text-sm text-muted-foreground",children:[s.length,"/",r," caracteres"]})]})})(),code:`const [text, setText] = useState('');
|
|
4
|
+
const maxLength = 200;
|
|
5
|
+
|
|
6
|
+
<Textarea
|
|
7
|
+
value={text}
|
|
8
|
+
onChange={(e) => setText(e.target.value)}
|
|
9
|
+
maxLength={maxLength}
|
|
10
|
+
/>
|
|
11
|
+
<div className="text-sm text-muted-foreground">
|
|
12
|
+
{text.length}/{maxLength} caracteres
|
|
13
|
+
</div>`},{title:"Com Label",preview:e.jsxs("div",{className:"grid w-full max-w-md gap-1.5",children:[e.jsx(t,{htmlFor:"message",children:"Sua mensagem"}),e.jsx(a,{placeholder:"Digite sua mensagem aqui.",id:"message"})]}),code:`<div className="grid gap-1.5">
|
|
14
|
+
<Label htmlFor="message">Sua mensagem</Label>
|
|
15
|
+
<Textarea id="message" />
|
|
16
|
+
</div>`},{title:"Estados",preview:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Normal"}),e.jsx(a,{placeholder:"Digite aqui..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{className:"text-muted-foreground",children:"Desabilitado"}),e.jsx(a,{placeholder:"Textarea desabilitado",disabled:!0})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Somente Leitura"}),e.jsx(a,{value:"Este texto não pode ser editado",readOnly:!0})]})]}),code:`<Textarea placeholder="Normal" />
|
|
17
|
+
<Textarea placeholder="Desabilitado" disabled />
|
|
18
|
+
<Textarea value="Somente leitura" readOnly />`},{title:"Tamanhos Customizados",preview:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Pequeno (3 linhas)"}),e.jsx(a,{rows:3,placeholder:"Textarea pequeno..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Médio (5 linhas)"}),e.jsx(a,{rows:5,placeholder:"Textarea médio..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Grande (10 linhas)"}),e.jsx(a,{rows:10,placeholder:"Textarea grande..."})]})]}),code:`<Textarea rows={3} placeholder="Pequeno" />
|
|
19
|
+
<Textarea rows={5} placeholder="Médio" />
|
|
20
|
+
<Textarea rows={10} placeholder="Grande" />`},{title:"Casos de Uso - Formulário de Feedback",preview:(()=>{const[s,l]=d.useState(""),[r,o]=d.useState(!1),i=()=>{o(!0),setTimeout(()=>{o(!1),l("")},2e3)};return e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{htmlFor:"feedback",children:"Como podemos melhorar?"}),e.jsx(a,{id:"feedback",placeholder:"Compartilhe suas sugestões ou problemas...",value:s,onChange:n=>l(n.target.value),rows:5}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Seu feedback nos ajuda a melhorar o produto"})]}),e.jsx(c,{onClick:i,disabled:!s||r,className:"w-full",children:r?"Enviado!":"Enviar Feedback"})]})})(),code:`const [feedback, setFeedback] = useState('');
|
|
21
|
+
|
|
22
|
+
<div className="space-y-2">
|
|
23
|
+
<Label>Como podemos melhorar?</Label>
|
|
24
|
+
<Textarea
|
|
25
|
+
value={feedback}
|
|
26
|
+
onChange={(e) => setFeedback(e.target.value)}
|
|
27
|
+
rows={5}
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
<Button onClick={handleSubmit}>
|
|
31
|
+
Enviar Feedback
|
|
32
|
+
</Button>`},{title:"Casos de Uso - Editor de Notas",preview:(()=>{const[s,l]=d.useState(""),[r,o]=d.useState(!1),i=s.trim().split(/\s+/).filter(Boolean).length;return e.jsx("div",{className:"space-y-4 max-w-md",children:e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(t,{children:"Minhas Notas"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(c,{variant:"outline",size:"sm",onClick:()=>{o(!0),setTimeout(()=>o(!1),1500)},disabled:!s,children:r?"✓ Salvo":"Salvar"}),e.jsx(c,{variant:"ghost",size:"sm",onClick:()=>l(""),disabled:!s,children:"Limpar"})]})]}),e.jsx(a,{placeholder:"Comece a escrever suas notas...",value:s,onChange:n=>l(n.target.value),rows:6}),e.jsxs("div",{className:"flex justify-between text-xs text-muted-foreground",children:[e.jsxs("span",{children:[s.length," caracteres"]}),e.jsxs("span",{children:[i," palavras"]})]})]})})})(),code:`const [note, setNote] = useState('');
|
|
33
|
+
const wordCount = note.trim().split(/s+/).filter(Boolean).length;
|
|
34
|
+
|
|
35
|
+
<div className="space-y-2">
|
|
36
|
+
<Label>Minhas Notas</Label>
|
|
37
|
+
<Textarea
|
|
38
|
+
value={note}
|
|
39
|
+
onChange={(e) => setNote(e.target.value)}
|
|
40
|
+
rows={6}
|
|
41
|
+
/>
|
|
42
|
+
<div className="flex justify-between text-xs">
|
|
43
|
+
<span>{note.length} caracteres</span>
|
|
44
|
+
<span>{wordCount} palavras</span>
|
|
45
|
+
</div>
|
|
46
|
+
</div>`}],props:[{name:"placeholder",type:"string",default:"-",description:"Texto do placeholder."},{name:"disabled",type:"boolean",default:"false",description:"Se o textarea está desabilitado."},{name:"rows",type:"number",default:"-",description:"Número de linhas de texto visíveis."}],accessibility:["Elemento HTML textarea padrão","Funciona com labels e controles de formulário","Acessível por teclado","Amigável para leitores de tela"]})}export{h as TextareaDoc};
|