MelissaPaciente: header custom do dialog Nova Sessao (icone + titulo + nome)

Antes: header simples "Nova sessão".
Agora: layout 3-col com:
- Icon pi-calendar-plus em quadrado primary 40x40
- Title "Nova sessão" (1rem font-weight 700)
- Subtitle: nome completo do paciente (truncate com ellipsis)

CSS .mpa-dlg-head + variants. Reusavel se outros dialogs precisarem
do mesmo padrao (Lancamento poderia usar tambem futuramente).

ESLint: 0 errors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-08 18:56:30 -03:00
parent 42a39ed3ea
commit b040e15c9b
+54 -2
View File
@@ -2382,14 +2382,25 @@ onBeforeUnmount(() => {
</Dialog>
<!-- Dialog: nova sessao na agenda. Mesma logica do Lancamento form
simples inline com tipo/data/hora/duracao/modalidade/titulo/obs. -->
simples inline com tipo/data/hora/duracao/modalidade/titulo/obs.
Header custom: icon + titulo + subtitulo com nome do paciente. -->
<Dialog
v-model:visible="novaSessaoOpen"
modal
dismissable-mask
:style="{ width: '460px', maxWidth: '92vw' }"
header="Nova sessão"
>
<template #header>
<div class="mpa-dlg-head">
<div class="mpa-dlg-head__icon">
<i class="pi pi-calendar-plus" />
</div>
<div class="mpa-dlg-head__text">
<div class="mpa-dlg-head__title">Nova sessão</div>
<div class="mpa-dlg-head__sub">{{ dash(nomeCompleto) }}</div>
</div>
</div>
</template>
<div class="mpa-novo-lanc">
<div class="mpa-novo-lanc__field">
<label class="mpa-novo-lanc__label">Tipo</label>
@@ -3578,6 +3589,47 @@ onBeforeUnmount(() => {
opacity: 0.75;
}
/* Header customizado do Dialog Nova Sessao: icon + titulo + subtitulo */
.mpa-dlg-head {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.mpa-dlg-head__icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
color: var(--p-primary-color);
flex-shrink: 0;
}
.mpa-dlg-head__icon > i { font-size: 1.05rem; }
.mpa-dlg-head__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mpa-dlg-head__title {
font-size: 1rem;
font-weight: 700;
color: var(--m-text);
line-height: 1.2;
}
.mpa-dlg-head__sub {
font-size: 0.78rem;
color: var(--m-text-muted);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Bloco de frequencia dentro do dialog Nova Sessao (espelha AgendaEventDialog) */
.mpa-recur {
margin-top: 4px;