Gales Autosave

Versao: 1.0.0 Data: 13/03/2026

---

Visao Geral

O componente Gales Autosave fornece um indicador visual de auto-save e uma lista de rascunhos salvos. O indicador fica posicionado no canto inferior direito da tela e informa ao usuario o estado atual da gravacao automatica. Complementarmente, um modal lista os rascunhos disponiveis para recuperacao.

---

Estrutura HTML

Indicador de Autosave

<div class="gales-autosave-indicator">
    <div class="gales-autosave-icon">
        <i class="material-icons">save</i>
    </div>
    <span class="gales-autosave-text">Salvo</span>
</div>

Estados do Indicador

<!-- Salvando (amarelo com animacao pulse) -->
<div class="gales-autosave-indicator gales-autosave-saving">
    <div class="gales-autosave-icon">
        <i class="material-icons">sync</i>
    </div>
    <span class="gales-autosave-text">Salvando...</span>
</div>

<!-- Salvo com sucesso (verde) -->
<div class="gales-autosave-indicator gales-autosave-saved">
    <div class="gales-autosave-icon">
        <i class="material-icons">check_circle</i>
    </div>
    <span class="gales-autosave-text">Salvo</span>
</div>

Modal de Rascunhos

<div class="modal">
    <div class="modal__content">
        <div class="modal__header">
            <h3>Rascunhos Salvos</h3>
        </div>
        <div class="modal__body">
            <ul class="gales-autosave-drafts">
                <li class="gales-autosave-draft-item">
                    <span class="gales-autosave-draft-title">GTA #1234</span>
                    <span class="gales-autosave-draft-date">13/03/2026 14:30</span>
                    <button class="btn btn--sm">Restaurar</button>
                </li>
            </ul>
        </div>
    </div>
</div>

---

Funcionalidades

1. Indicador fixo -- posicionado no canto inferior direito (position: fixed), visivel durante toda a edicao do formulario
2. Estado salvando -- classe .gales-autosave-saving exibe icone de sincronizacao com animacao pulse em amarelo
3. Estado salvo -- classe .gales-autosave-saved exibe icone de confirmacao em verde
4. Lista de rascunhos -- modal que lista rascunhos salvos com data e opcao de restaurar

---

Classes CSS

Classe	Descricao
.gales-autosave-indicator	Container principal, position: fixed no canto inferior direito
.gales-autosave-icon	Icone do indicador
.gales-autosave-text	Texto descritivo do estado
.gales-autosave-saving	Estado de salvamento em andamento (amarelo, pulse)
.gales-autosave-saved	Estado de salvamento concluido (verde)
.gales-autosave-drafts	Lista de rascunhos no modal
.gales-autosave-draft-item	Item individual de rascunho

---

Dark Mode

O indicador se adapta ao modo escuro ajustando as cores de fundo e texto. Os estados de cor (amarelo para salvando, verde para salvo) mantem contraste adequado em ambos os temas. O modal de rascunhos utiliza o dark mode padrao do componente Modal.

---

Mantido por: Equipe Ipeweb