105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<!-- src/features/agenda/components/AgendaRightPanel.vue -->
|
|
<script setup>
|
|
import Card from 'primevue/card'
|
|
import Divider from 'primevue/divider'
|
|
import Button from 'primevue/button'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: 'Painel' },
|
|
subtitle: { type: String, default: 'Visão rápida do dia e ações de triagem.' },
|
|
sticky: { type: Boolean, default: true },
|
|
showHeaderActions: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emit = defineEmits(['refresh', 'collapse'])
|
|
|
|
/**
|
|
* Este componente é propositalmente "burro".
|
|
* Ele só organiza layout e slots para o painel lateral.
|
|
* Regras/ações reais ficam nas páginas ou nos cards filhos.
|
|
*/
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="agenda-right-panel"
|
|
:class="{ 'is-sticky': sticky }"
|
|
>
|
|
<Card class="h-full">
|
|
<template #title>
|
|
<div class="flex align-items-start justify-content-between gap-2">
|
|
<div class="min-w-0">
|
|
<div class="text-base md:text-lg font-semibold truncate">
|
|
{{ title }}
|
|
</div>
|
|
<div class="text-xs mt-1" style="color: var(--text-color-secondary);">
|
|
{{ subtitle }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showHeaderActions" class="flex align-items-center gap-1">
|
|
<Button
|
|
size="small"
|
|
text
|
|
icon="pi pi-refresh"
|
|
v-tooltip.top="'Atualizar painel'"
|
|
@click="emit('refresh')"
|
|
/>
|
|
<Button
|
|
size="small"
|
|
text
|
|
icon="pi pi-window-minimize"
|
|
v-tooltip.top="'Recolher (UI)'"
|
|
@click="emit('collapse')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="content-wrap">
|
|
<!-- TOP slot (ex.: próximas sessões) -->
|
|
<div class="slot-top">
|
|
<slot name="top" />
|
|
</div>
|
|
|
|
<Divider class="my-3" />
|
|
|
|
<!-- BOTTOM slot (ex.: pulse / atalhos) -->
|
|
<div class="slot-bottom">
|
|
<slot name="bottom" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.agenda-right-panel{
|
|
width: 100%;
|
|
}
|
|
|
|
.agenda-right-panel.is-sticky{
|
|
position: sticky;
|
|
top: 1rem;
|
|
align-self: start;
|
|
}
|
|
|
|
/* Deixa o painel com scroll interno sem estourar a página */
|
|
.content-wrap{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .25rem;
|
|
max-height: calc(100vh - 220px);
|
|
overflow: auto;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
/* Melhor sensação de “sessões” */
|
|
.slot-top, .slot-bottom{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .75rem;
|
|
}
|
|
</style> |