Criar Componente Abstrato para Modais (QDialog)

[rafael-ventura]

Objetivo

Criar um componente Vue que abstraia o uso de modais (QDialog ) do Quasar, permitindo reutilização consistente em diferentes cenários, como textos informativos, formulários ou ações com botões.

---

Contexto

As modais são usadas em diversos pontos da aplicação, mas atualmente o código para elas é duplicado e varia em estilo e comportamento. Esta tarefa visa centralizar a lógica e a estilização em um único componente reutilizável, alinhado ao design descrito no Figma.

---

Requisitos do Componente

1. Modularidade:

   • Aceitar diferentes conteúdos via slots:
     • Títulos e textos.
     • Formulários.
     • Botões de ação.

2. Propriedades Configuráveis:

   • Deve ser possível passar título, mensagem e botões de ação diretamente como propriedades.

3. Eventos:

   • Emitir eventos ao fechar a modal e ao confirmar uma ação (se aplicável).

4. Estilização Consistente:

   • Seguir os padrões de design definidos no Figma.

---

Passos

1. Criar o Componente AppModal

1. Usar o QDialog do Quasar como base.
2. Aceitar:
   • Props para título, mensagem e configuração de botões.
   • Slots dinâmicos para conteúdos customizáveis (cabeçalho, corpo, rodapé).
3. Emitir eventos padrão como @close e @confirm.

2. Implementar Estilização

1. Garantir que o componente segue o design descrito no Figma.
2. Garantir que a modal é responsiva para desktop e mobile.

3. Documentação

1. Criar uma página de exemplo no Storybook ou uma rota /docs no app.
2. Demonstrar os seguintes casos de uso:
   • Modal com texto simples.
   • Modal com formulário.
   • Modal com botões de ação.

---

Critérios de Aceitação

• O componente deve encapsular a lógica de QDialog do Quasar e suportar diferentes conteúdos.
• Deve ser reutilizável em cenários variados (texto, formulário, botões).
• O design e o comportamento devem estar alinhados ao padrão descrito no Figma.
• O componente deve ser responsivo e funcionar bem no contexto de um PWA.