Badges .mdt-section__count.is-info e .is-accent tinham o mesmo
problema do botao primary: bg solido com texto branco/cor primary
quebrava o contraste no modo escuro (texto sumia).
Trocados pelo .mdt-page__count (mesmo estilo do badge no header
da pagina) — usa var(--m-accent-soft) que adapta ao tema.
Tambem removido o CSS .mdt-section__count (e .is-info / .is-accent)
que ficou orfao.
Visual: numero do contador (17 globais, N tenant) com o mesmo
estilo do "17" no header — consistencia visual + dark mode safe.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bug: no modo escuro o bg primary do botao --primary tornava o
texto branco ilegivel — cor primary clara contra fundo claro.
Fix: estilo outlined em vez de filled:
- background transparente
- border-color: var(--p-primary-color)
- color: var(--p-primary-color)
- hover: bg sutil 10% mix com primary
Mantem hierarquia visual (a borda destacada sinaliza acao primaria)
mas sem o conflito de contraste. Funciona em ambos os temas.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
.mdt-card__name: -webkit-line-clamp 1 -> 3 + word-break:break-word
+ line-height 1.3. Nomes longos (ex: "Termo de Consentimento Livre
e Esclarecido para Atendimento Online") cabem inteiros em ate 3
linhas, com elipses no final se passar.
.mdt-card max-height: 200px -> 240px pra acomodar o titulo mais
alto + tipo + descricao (2 linhas) + footer com variaveis.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bug: duplicar template disparava toast 2x e criava 2 copias.
Causa: MelissaLayout ja monta <ConfirmDialog /> global. Quando
MelissaDocumentosTemplates tambem montava, o confirm.require()
do PrimeVue dispara em TODOS os ConfirmDialog ativos -> callback
do accept executa 2x.
Fix: remove o <ConfirmDialog /> local de MelissaDocumentosTemplates.
O global do MelissaLayout cobre tudo.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mobile (<1024px) agora segue padrao MelissaBloqueios:
- Coluna esquerda (Templates do sistema) eh teleportada pra um
drawer fixed que abre via botao "Templates do sistema" no header.
- Botao .mdt-menu-btn--mobile-only substitui o titulo no mobile
(mais legivel + acao clara).
- Backdrop escuro com blur fecha o drawer ao clicar fora.
- Auto-fecha quando o user seleciona um template (libera viewport
pra ver o preview no main).
Script:
- drawerOpen + isMobile refs + matchMedia listener
- toggleDrawer/fecharDrawer helpers
- onMounted setup + onBeforeUnmount cleanup
Template:
- <Transition name="mdt-drawer-fade"> wrap (slide horizontal +
fade do backdrop)
- <Teleport to="#mdt-mobile-drawer-target" :disabled="!isMobile">
envolvendo a <aside class="mdt-side">
- Botao "Menu" no header com class mdt-menu-btn--mobile-only
CSS:
- .mdt-mobile-drawer fixed left, transform translateX, 250ms cubic
- .mdt-mobile-drawer__backdrop overlay com blur
- @media (max-width: 1023px): cols vira 1-col, sidebar inline some,
botao menu aparece, titulo canonico some, acções viram icone-only
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Substitui o <div class="mdt-grid"> v-for simples por <DataView>
do PrimeVue na coluna "Seus documentos".
Beneficios:
- Paginacao automatica quando passa de 12 templates (era scroll
infinito virando lento)
- Slot #grid permite manter o layout de cards atual
- Footer com paginator integrado ao design (border-top + bg
transparente)
CSS:
- .mdt-dataview flex column ocupando o main
- :deep(.p-dataview-content) flex 1 + overflow auto = scroll
interno dos cards
- :deep(.p-dataview-paginator-bottom) flex-shrink 0 = paginator
sempre visivel no fundo
- .mdt-main .mdt-grid passa a ter padding 12 e gap 10 (era
herdado do .mdt-grid global)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1. Icone "eye" do header de Preview -> cor primary (classe
mdt-main__title-icon-eye).
2. Icone "ellipsis-v" (3 pontos) dos cards do tenant -> cor
primary via :deep(.p-button-icon) selector.
3. Variaveis do card: formato "< 12 variaveis >" (entities
HTML </>) em font monospace + cor primary + bold.
Removido o icone pi-code (a propria notacao < > sinaliza).
4. .mdt-card max-height: 200px + overflow hidden. Foot agora
tem justify-content: center + margin-top: auto pra grudar
no fundo do card.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Erro: \"Unexpected token, expected }\" em \`{{ array.map(v => \`{{...${v}}}...\`) }}\`.
Vue parser confunde os \`{{\` da template string aninhada com os
delimitadores de interpolacao Vue, abortando parse.
Fix: extrai pra helper externo formatVarsPreview(vars, max) que
monta as chaves via concatenacao de strings (open + open + v +
close + close) — sem template literal com \`{{\` literal.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Refatora MelissaDocumentosTemplates seguindo padrao do
MelissaAgendaConfig (2-col com sidebar). Dois ajustes pedidos:
1. Layout 2-col (mdt-cols grid 360px + 1fr):
- COL 1 (sidebar): "Templates do sistema" — lista vertical
compacta com nome/tipo/descricao. Click abre preview.
- COL 2 (main): "Seus documentos" + subtitulo + grid de cards
dos templates do tenant.
- Empty states distintos por coluna.
- Mobile (<900px): empilha 1-col.
2. Preview antes de duplicar:
- View 'preview' nova (alem de list/create/edit).
- Click num template do sistema -> view='preview' (substitui
"Seus documentos" no main, sidebar permanece pra navegar).
- Header da main muda: nome do template + tipo/desc + 2 botoes
(Voltar / Duplicar).
- Iframe sandbox=allow-same-origin renderiza HTML completo
(cabecalho+corpo+rodape com CSS basico A4-like).
- Footer com lista de variaveis {{...}} do template (5 +N).
- Item ativo na sidebar destaca borda primary + opacity 1 no
icone de visualizar.
- Pos-duplicar: volta pra view='list' pra mostrar o novo
template no main.
UX result: user le antes de copiar (evita lixo em "Seus documentos"
de copias que nao queria).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Leonardo