v-sistec-features 1.31.11 → 1.31.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.31.11",
+  "version": "1.31.13",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",

package/src/DataAgenda/VDataAgenda.vue

@@ -1,75 +1,151 @@
 <!--
 ========
 O layout raiz que orquestra a interface com cabeçalhos modulares separados.
-Utiliza as propriedades nativas de visão e seleção do Vue 3 para manter tudo em sincronia.
-Atua como o ponto de entrada da biblioteca, repassando as configurações de usuário, layout, recurso único opcional e o cliente HTTP para os filhos.
+Suporta os modos 'calendario', 'tabela' (matriz horizontal) e 'tabela-horario' (grade vertical de horários por turno).
+Repassa as configurações de usuário, layout, recurso único opcional, blocos por agenda e o cliente HTTP para os filhos,
+além de destacar a semana operacional ativa, bloquear dias inativos no minicalendário lateral e expor a lista de
+recursos atualmente em exibição no modelo ativo.
 ========
 -->
 <script setup lang="ts">
-import { ref, onMounted, provide } from 'vue';
+import { ref, computed, onMounted, provide } from 'vue';
 import { VueCal } from 'vue-cal';
 import 'vue-cal/style.css';
-import { useAgenda } from './composables/useAgenda.ts';
+import { useAgenda } from './composables/useAgenda';
+import { calcularDataInicioSemana, formatarDataIso } from './composables/useGradeCompartilhada';
 import AgendaVueCal from './components/AgendaVueCal.vue';
 import AgendaMatrix from './components/AgendaMatrix.vue';
 import AgendaMatrixUnico from './components/AgendaMatrixUnico.vue';
+import AgendaTabelaHorario from './components/AgendaTabelaHorario.vue';
 import HeaderCalendario from './components/HeaderCalendario.vue';
 import HeaderTabela from './components/HeaderTabela.vue';
 
 const props = withDefaults(defineProps<{
-    modoLayout?: 'calendario' | 'tabela',
-    idRecursoUnico?: number | string | null,
-    usaInterceptador?: boolean,
-    usuarioLogado?: string,
-    tituloPadrao?: string,
-    ocultarTituloModal?: boolean,
-    fetch: any,
+  modoLayout?: 'calendario' | 'tabela' | 'tabela-horario',
+  idRecursoUnico?: number | string | null,
+  usaInterceptador?: boolean,
+  usuarioLogado?: string,
+  tituloPadrao?: string,
+  ocultarTituloModal?: boolean,
+  configuracaoBlocos?: any,
+  fetch: any,
 }>(), {
-    modoLayout: 'calendario',
-    idRecursoUnico: null,
-    usaInterceptador: false,
-    usuarioLogado: '',
-    tituloPadrao: '',
-    ocultarTituloModal: false
+  modoLayout: 'calendario',
+  idRecursoUnico: null,
+  usaInterceptador: false,
+  usuarioLogado: '',
+  tituloPadrao: '',
+  ocultarTituloModal: false,
+  configuracaoBlocos: null
 });
 
 provide('api-instance-agenda', props.fetch);
+defineEmits(['before-save']);
 
-const emit = defineEmits(['before-save']);
+const {
+  dataSelecionada,
+  dataVisao,
+  agendasDisponiveis,
+  agendaSelecionada,
+  datasDesabilitadas,
+  carregarRecursosEAgendas
+} = useAgenda(props.fetch);
 
-// Armazena as referências e funções do composable de agenda para manipulação global.
-const { dataSelecionada, dataVisao, carregarRecursosEAgendas } = useAgenda(props.fetch);
-
-// Controla o estado de abertura da barra lateral (menu) contendo o minicalendário.
 const menuAberto = ref(true);
-
-// Armazena a referência da instância do componente vue-cal em sua versão miniatura.
 const calendarioMiniRef = ref<any>(null);
+const modeloAtivoRef = ref<any>(null);
+
+const componenteModeloAtivo = computed(() => {
+  if (props.modoLayout === 'calendario') return AgendaVueCal;
+  if (props.modoLayout === 'tabela-horario') return AgendaTabelaHorario;
+  if (props.modoLayout === 'tabela' && props.idRecursoUnico) return AgendaMatrixUnico;
+  return AgendaMatrix;
+});
+
+const propriedadesModeloAtivo = computed(() => {
+  const base = {
+    usaInterceptador: props.usaInterceptador,
+    tituloPadrao: props.tituloPadrao,
+    ocultarTituloModal: props.ocultarTituloModal
+  };
 
-// Armazena a referência da instância principal do componente AgendaVueCal.
-const agendaVueCalRef = ref<any>(null);
+  if (props.modoLayout === 'calendario') {
+    return { ...base, usuarioLogado: props.usuarioLogado };
+  }
+  if (props.modoLayout === 'tabela-horario') {
+    return { ...base, idRecursoUnico: props.idRecursoUnico, configuracaoBlocos: props.configuracaoBlocos };
+  }
+  if (props.modoLayout === 'tabela' && props.idRecursoUnico) {
+    return { ...base, idRecurso: props.idRecursoUnico, configuracaoBlocos: props.configuracaoBlocos };
+  }
+  return { ...base, configuracaoBlocos: props.configuracaoBlocos };
+});
+
+const recursosEmExibicao = computed(() => modeloAtivoRef.value?.recursosEmExibicao ?? []);
+
+defineExpose({ recursosEmExibicao });
 
-// Executa o carregamento inicial de recursos ao montar o componente na tela.
 onMounted(() => { carregarRecursosEAgendas(); });
 
-// Recebe nada. Devolve nada.
-// É usada para retrair ou expandir a aba esquerda de navegação rápida.
+const obterDataDaCelula = (cell: any): Date | null => {
+  if (!cell) return null;
+  if (cell instanceof Date) return cell;
+  if (cell.start) return new Date(cell.start);
+  return null;
+};
+
+const conjuntoDatasDesabilitadas = computed(() => new Set<string>(datasDesabilitadas.value));
+
+const datasVisiveisNaSemana = computed(() => {
+  const visiveis = new Set<string>();
+  if (props.modoLayout !== 'tabela-horario' || !dataSelecionada.value || !agendaSelecionada.value) {
+    return visiveis;
+  }
+
+  const agendaObj = agendasDisponiveis.value.find(
+    (a: any) => Number(a.id_agenda) === Number(agendaSelecionada.value)
+  );
+  if (!agendaObj?.detalhes) return visiveis;
+
+  const inicioSemana = calcularDataInicioSemana(
+    dataSelecionada.value,
+    Number(agendaObj.detalhes.dia_inicio_semana_agenda ?? 0)
+  );
+  const diasVisiveis = Number(agendaObj.detalhes.dias_visiveis_agenda ?? 6);
+
+  for (let i = 0; i < diasVisiveis; i++) {
+    const diaCorrente = new Date(inicioSemana);
+    diaCorrente.setDate(inicioSemana.getDate() + i);
+    visiveis.add(formatarDataIso(diaCorrente));
+  }
+
+  return visiveis;
+});
+
+const ehDiaBloqueadoNoMini = (cell: any): boolean => {
+  const data = obterDataDaCelula(cell);
+  if (!data || props.modoLayout !== 'tabela-horario') return false;
+  return conjuntoDatasDesabilitadas.value.has(formatarDataIso(data));
+};
+
+const ehDiaVisivelNaGrade = (cell: any): boolean => {
+  const data = obterDataDaCelula(cell);
+  if (!data || props.modoLayout !== 'tabela-horario') return false;
+  return datasVisiveisNaSemana.value.has(formatarDataIso(data));
+};
+
 const alternarMenu = () => { menuAberto.value = !menuAberto.value; };
 
-// Recebe nada. Devolve nada.
-// É usada para devolver o usuário à data atual do sistema nas visualizações principais e no mini-calendário.
-const irParaHoje = () => { 
-    const hoje = new Date();
-    dataSelecionada.value = hoje; 
-    dataVisao.value = hoje;
-    if (props.modoLayout === 'calendario') agendaVueCalRef.value?.irParaHoje();
-    if (calendarioMiniRef.value) calendarioMiniRef.value.view.goToToday();
+const irParaHoje = () => {
+  const hoje = new Date();
+  dataSelecionada.value = hoje;
+  dataVisao.value = hoje;
+  if (props.modoLayout === 'calendario') modeloAtivoRef.value?.irParaHoje?.();
+  if (calendarioMiniRef.value) calendarioMiniRef.value.view.goToToday();
 };
 
-// Recebe o identificador em string do modo de visualização. Devolve nada.
-// É usada para trocar a apresentação do calendário grande entre visão de dias singulares e a semana expandida.
-const mudarVisao = (novaVisao: string) => { 
-    agendaVueCalRef.value?.mudarVisao(novaVisao); 
+const mudarVisao = (novaVisao: string) => {
+  modeloAtivoRef.value?.mudarVisao?.(novaVisao);
 };
 </script>
 
@@ -99,6 +175,7 @@ const mudarVisao = (novaVisao: string) => {
               <vue-cal
                 ref="calendarioMiniRef"
                 class="calendario-mini vuecal--blue-theme"
+                :class="{ 'modo-mini-tabela-horario': props.modoLayout === 'tabela-horario' }"
                 small
                 active-view="month"
                 :views="['month']"
@@ -106,180 +183,88 @@ const mudarVisao = (novaVisao: string) => {
                 hide-view-selector
                 :click-to-navigate="false"
                 locale="pt-br"
+                :disable-days="props.modoLayout === 'tabela-horario' ? datasDesabilitadas : []"
                 v-model:selected-date="dataSelecionada"
                 :view-date="dataVisao"
                 @update:selected-date="dataVisao = $event"
               >
                 <template #views-bar></template>
                 <template #today-button></template>
+
+                <template #cell-content="{ cell }">
+                  <div
+                    class="vuecal__cell-date"
+                    :class="{
+                      'dia-semana-visivel': ehDiaVisivelNaGrade(cell),
+                      'dia-coluna-inativa': ehDiaBloqueadoNoMini(cell)
+                    }"
+                    @mousedown.stop="
+                      (ehDiaVisivelNaGrade(cell) || ehDiaBloqueadoNoMini(cell))
+                        ? $event.preventDefault()
+                        : null
+                    "
+                    @click.stop="
+                      (!ehDiaVisivelNaGrade(cell) && !ehDiaBloqueadoNoMini(cell))
+                        ? (dataSelecionada = obterDataDaCelula(cell) || dataSelecionada, dataVisao = obterDataDaCelula(cell) || dataVisao)
+                        : null
+                    "
+                  >
+                    {{ cell.content }}
+                  </div>
+                </template>
               </vue-cal>
             </div>
           </div>
         </aside>
 
         <main class="area-calendario">
-          <AgendaVueCal
-            v-if="props.modoLayout === 'calendario'"
-            ref="agendaVueCalRef"
-            :usa-interceptador="props.usaInterceptador"
-            :usuario-logado="props.usuarioLogado"
-            :titulo-padrao="props.tituloPadrao"
-            :ocultar-titulo-modal="props.ocultarTituloModal"
-            @before-save="$emit('before-save', $event)"
-          >
-            <template #campos-extras>
-              <slot name="campos-extras"></slot>
-            </template>
-          </AgendaVueCal>
-
-          <AgendaMatrixUnico
-            v-else-if="props.modoLayout === 'tabela' && props.idRecursoUnico"
-            :id-recurso="props.idRecursoUnico"
-            :usa-interceptador="props.usaInterceptador"
-            :titulo-padrao="props.tituloPadrao"
-            :ocultar-titulo-modal="props.ocultarTituloModal"
-            @before-save="$emit('before-save', $event)"
-          >
-            <template #campos-extras>
-              <slot name="campos-extras"></slot>
-            </template>
-          </AgendaMatrixUnico>
-
-          <AgendaMatrix
-            v-else-if="props.modoLayout === 'tabela'"
-            :usa-interceptador="props.usaInterceptador"
-            :titulo-padrao="props.tituloPadrao"
-            :ocultar-titulo-modal="props.ocultarTituloModal"
+          <component
+            :is="componenteModeloAtivo"
+            ref="modeloAtivoRef"
+            v-bind="propriedadesModeloAtivo"
             @before-save="$emit('before-save', $event)"
           >
-            <template #campos-extras>
-              <slot name="campos-extras"></slot>
+            <template v-for="(_, nomeSlot) in $slots" :key="nomeSlot" #[nomeSlot]="slotProps">
+              <slot :name="nomeSlot" v-bind="slotProps ?? {}"></slot>
             </template>
-          </AgendaMatrix>
+          </component>
         </main>
       </div>
     </div>
   </div>
 </template>
+
 <style lang="scss">
-// importa o main.scss
 @use '../assets/scss/main.scss';
 </style>
 
 <style scoped>
-.painel-agenda-unificado { 
-    background: var(--bg-primary); 
-    border-radius: 16px; 
-    box-shadow: var(--shadow-float); 
-    border: 1px solid var(--border-light); 
-    flex-grow: 1; 
-    display: flex; 
-    flex-direction: column; 
-    overflow: hidden; 
-}
-.painel-header-topo { 
-    height: 60px; 
-    background-color: var(--bg-primary); 
-    border-bottom: 1px solid var(--border-light); 
-    display: flex; 
-    align-items: center; 
-    justify-content: space-between; 
-    padding: 0 20px; 
-    flex-shrink: 0; 
-}
+.painel-agenda-unificado { background: var(--bg-primary); border-radius: 16px; box-shadow: var(--shadow-float); border: 1px solid var(--border-light); flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
+.painel-header-topo { height: 60px; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
 .corpo-principal { display: flex; flex-grow: 1; overflow: hidden; }
-.barra-lateral { 
-    width: 300px; 
-    background-color: var(--bg-primary); 
-    border-right: 1px solid var(--border-light); 
-    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s; 
-    overflow: hidden; 
-    flex-shrink: 0; 
-}
+.barra-lateral { width: 300px; background-color: var(--bg-primary); border-right: 1px solid var(--border-light); transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s; overflow: hidden; flex-shrink: 0; }
 .barra-lateral.oculta { width: 0; border-right: none; opacity: 0; }
 .conteudo-lateral-fixo { width: 300px; padding: 15px; }
 .secao-mini-cal { width: 100%; }
-.area-calendario { 
-    flex-grow: 1; 
-    overflow: hidden; 
-    background-color: var(--bg-primary); 
-    display: flex; 
-    flex-direction: column; 
-}
-
+.area-calendario { flex-grow: 1; overflow: hidden; background-color: var(--bg-primary); display: flex; flex-direction: column; }
 .calendario-mini { border: none !important; box-shadow: none !important; background-color: transparent !important; }
-:deep(.calendario-mini .vuecal__header), :deep(.calendario-mini .vuecal__title-bar) { background-color: transparent !important; border: none !important; padding-bottom: 5px; }
-:deep(.calendario-mini .vuecal__title), :deep(.calendario-mini .vuecal__arrow) { 
-    font-size: 1rem; 
-    font-weight: 600; 
-    color: var(--color-brand) !important; 
-    background: transparent !important; 
-}
-:deep(.calendario-mini .vuecal__heading) { border: none !important; background-color: transparent !important; font-weight: 600; color: var(--text-secondary); padding-bottom: 4px; }
+:deep(.calendario-mini .vuecal__header), :deep(.calendario-mini .vuecal__title-bar) { background-color: var(--bg-primary) !important; border: none !important; padding-bottom: 5px; }
+:deep(.calendario-mini .vuecal__title), :deep(.calendario-mini .vuecal__arrow) { font-size: 1rem; font-weight: 600; color: var(--color-brand) !important; background: transparent !important; }
+:deep(.calendario-mini .vuecal__weekdays-headings) { background-color: var(--bg-primary) !important; border-bottom: 1px solid var(--border-light) !important; }
+:deep(.calendario-mini .vuecal__heading), :deep(.calendario-mini .vuecal__weekday), :deep(.calendario-mini .vuecal__weekday-name), :deep(.calendario-mini .vuecal__heading *) { background-color: var(--bg-primary) !important; color: var(--text-secondary) !important; font-weight: 600 !important; border: none !important; padding-bottom: 4px; }
 :deep(.calendario-mini .vuecal__cell) { border: none !important; background-color: transparent !important; height: 32px !important; min-height: 32px !important; aspect-ratio: auto !important; }
 :deep(.calendario-mini .vuecal__cell::before) { display: none !important; content: none !important; }
-:deep(.calendario-mini .vuecal__cell-content) { height: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important; justify-content: center !important; align-items: center !important; }
-:deep(.calendario-mini .vuecal__cell-date) { width: 24px !important; height: 24px !important; font-size: 12px !important; line-height: 24px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; border-radius: 50% !important; border: 2px solid transparent !important; box-sizing: border-box !important; transition: all 0.2s ease; }
-:deep(.calendario-mini .vuecal__cell--selected) { background-color: transparent !important; }
-:deep(.calendario-mini .vuecal__cell--selected .vuecal__cell-date) { 
-    background-color: var(--color-brand) !important; 
-    color: var(--text-inverse) !important; 
-    border-color: var(--color-brand) !important; 
-}
+:deep(.calendario-mini .vuecal__cell-content) { height: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important; justify-content: center !important; align-items: center !important; width: 100% !important; }
+:deep(.calendario-mini .vuecal__cell-date) { width: 26px !important; height: 26px !important; font-size: 12px !important; line-height: 26px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; border-radius: 50% !important; border: 2px solid transparent !important; box-sizing: border-box !important; transition: all 0.2s ease; cursor: pointer; background-color: transparent !important; color: var(--text-primary); }
+:deep(.calendario-mini .vuecal__cell--selected), :deep(.calendario-mini .vuecal__cell--today) { background-color: transparent !important; }
+:deep(.calendario-mini:not(.modo-mini-tabela-horario) .vuecal__cell--selected .vuecal__cell-date) { background-color: var(--color-brand) !important; color: var(--text-inverse) !important; border-color: var(--color-brand) !important; }
+:deep(.calendario-mini .vuecal__cell--today:not(.vuecal__cell--selected) .vuecal__cell-date:not(.dia-semana-visivel)) { background-color: var(--color-brand-light) !important; border-color: transparent !important; color: var(--color-brand) !important; }
 :deep(.vuecal__body) { padding: 0; gap: 0; margin: 0; }
-:deep(.calendario-mini .vuecal__cell--today) { background-color: transparent !important; }
-:deep(.calendario-mini .vuecal__cell-date){ background-color: transparent !important; color: var(--text-primary); }
-:deep(.calendario-mini .vuecal__cell--today:not(.vuecal__cell--selected) .vuecal__cell-date) { 
-    background-color: var(--color-brand-light) !important; 
-    border-color: transparent !important; 
-    color: var(--color-brand) !important; 
-}
 :deep(.calendario-mini .vuecal__views-bar) { display: none !important; }
 :deep(.calendario-mini .vuecal__nav--next), :deep(.calendario-mini .vuecal__nav--prev) { color: var(--text-primary) !important; }
-:deep(.calendario-mini .vuecal__body){ height: 0%!important; }
-:deep(.calendario-mini .vuecal__scrollable-wrap){ background-color: transparent!important; }
-
-/* Remove o fundo branco forçado dos dias da semana no mini-calendário */
-:deep(.calendario-mini .vuecal__weekdays-headings),
-:deep(.calendario-mini .vuecal__weekday) {
-    background-color: transparent !important;
-    border: none !important;
-    color: var(--text-secondary) !important;
-}
-
-:deep(.calendario-mini .vuecal__weekdays-headings) {
-    background: transparent !important;
-    background-color: transparent !important;
-    border-bottom: 1px solid var(--border-light) !important;
-}
-
-/* Aplica o fundo transparente e a cor correta a cada dia individualmente e seus filhos */
-:deep(.calendario-mini .vuecal__heading),
-:deep(.calendario-mini .vuecal__weekday),
-:deep(.calendario-mini .vuecal__heading *) {
-    background: transparent !important;
-    background-color: transparent !important;
-    color: var(--text-secondary) !important;
-    font-weight: 600 !important;
-    border: none !important;
-}
-
-:deep(.calendario-mini .vuecal__header),
-:deep(.calendario-mini .vuecal__weekdays-headings) {
-    background: var(--bg-primary) !important;
-    background-color: var(--bg-primary) !important;
-    border-bottom: 1px solid var(--border-light) !important;
-}
-
-/* Garante que os itens individuais e o texto adotem o fundo escuro e texto legível */
-:deep(.calendario-mini .vuecal__heading),
-:deep(.calendario-mini .vuecal__weekday),
-:deep(.calendario-mini .vuecal__weekday-name),
-:deep(.calendario-mini .vuecal__heading *) {
-    background: var(--bg-primary) !important;
-    background-color: var(--bg-primary) !important;
-    color: var(--text-secondary) !important;
-    font-weight: 600 !important;
-    border: none !important;
-}
+:deep(.calendario-mini .vuecal__body) { height: 0% !important; }
+:deep(.calendario-mini .vuecal__scrollable-wrap) { background-color: transparent !important; }
+:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell--disabled) { pointer-events: none !important; cursor: not-allowed !important; }
+:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell-date.dia-coluna-inativa) { opacity: 0.22 !important; color: var(--text-secondary) !important; background-color: transparent !important; border-color: transparent !important; cursor: not-allowed !important; pointer-events: none !important; text-decoration: line-through; }
+:deep(.calendario-mini.modo-mini-tabela-horario .vuecal__cell-date.dia-semana-visivel) { background-color: var(--color-brand) !important; color: var(--text-inverse) !important; border-color: var(--color-brand) !important; font-weight: 700 !important; width: 92% !important; border-radius: 6px !important; cursor: default !important; box-shadow: var(--shadow-sm); }
 </style>

package/src/DataAgenda/components/AgendaMatrix.vue

@@ -1,8 +1,9 @@
 <!--
 ========
 Este arquivo representa a visualização em matriz para múltiplos recursos com suporte a filtragem.
-Ele utiliza o AgendaMatrixBase para renderizar a grade e gerencia o dropdown de seleção de salas,
-preservando os filtros ativos mesmo quando o usuário altera a data no mini-calendário.
+Ele utiliza o AgendaMatrixBase para renderizar a grade, repassa a configuração de blocos da agenda,
+gerencia o dropdown de seleção de salas preservando os filtros ativos ao mudar a data e expõe a lista
+de recursos atualmente em exibição (já filtrada).
 ========
 -->
 <script setup lang="ts">
@@ -13,30 +14,23 @@ import AgendaMatrixBase from './AgendaMatrixBase.vue';
 const props = defineProps({
     usaInterceptador: { type: Boolean, default: false },
     tituloPadrao: { type: String, default: '' },
-    ocultarTituloModal: { type: Boolean, default: false }
+    ocultarTituloModal: { type: Boolean, default: false },
+    configuracaoBlocos: { type: [Array, Object], default: null }
 });
 
 const api = inject('api-instance-agenda') as any;
-const emit = defineEmits(['before-save']);
+defineEmits(['before-save']);
 
-const { dadosMatrix, agendaSelecionada } = useAgenda(api);
+const { dadosMatrix, agendaSelecionada, recursosDisponiveis } = useAgenda(api);
 
-// Armazena os IDs (em string) dos recursos visíveis selecionados no filtro.
 const recursosVisiveisIds = ref<string[]>([]);
-
-// Armazena o ID da última agenda cujo filtro foi inicializado para evitar reset ao mudar apenas a data.
 const idAgendaFiltroInicializado = ref<number | null>(null);
-
-// Controla a abertura do menu dropdown de filtro de salas.
 const menuFiltroAberto = ref(false);
 
-// Extrai a lista de recursos presentes no primeiro dia retornado na matriz.
 const recursosPermitidosNaMatriz = computed(() => {
-    if (!dadosMatrix.value?.datas_matriz?.[0]?.recursos_slot) return [];
-    return dadosMatrix.value.datas_matriz[0].recursos_slot;
+    return dadosMatrix.value?.datas_matriz?.[0]?.recursos_slot || [];
 });
 
-// Observa os recursos da matriz e inicializa o filtro apenas quando a agenda muda ou na primeira carga.
 watch(recursosPermitidosNaMatriz, (novosRecursos) => {
     if (novosRecursos.length === 0) {
         recursosVisiveisIds.value = [];
@@ -53,15 +47,31 @@ watch(recursosPermitidosNaMatriz, (novosRecursos) => {
     }
 }, { immediate: true });
 
-// Marca todos os recursos disponíveis no filtro de salas.
+const recursosEmExibicao = computed(() => {
+    if (recursosVisiveisIds.value.length === 0) return [];
+
+    return recursosPermitidosNaMatriz.value
+        .filter((recMatriz: any) => recursosVisiveisIds.value.includes(String(recMatriz.id_recurso)))
+        .map((recMatriz: any) => {
+            return recursosDisponiveis.value.find(
+                (r: any) => Number(r.id_recurso) === Number(recMatriz.id_recurso)
+            ) || {
+                id_recurso: recMatriz.id_recurso,
+                nome_recurso: recMatriz.nome_recurso,
+                id_agenda: agendaSelecionada.value
+            };
+        });
+});
+
 const selecionarTodos = () => {
     recursosVisiveisIds.value = recursosPermitidosNaMatriz.value.map((r: any) => String(r.id_recurso));
 };
 
-// Desmarca todos os recursos no filtro de salas.
 const limparFiltros = () => {
     recursosVisiveisIds.value = [];
 };
+
+defineExpose({ recursosEmExibicao });
 </script>
 
 <template>
@@ -70,8 +80,9 @@ const limparFiltros = () => {
     :usa-interceptador="props.usaInterceptador"
     :titulo-padrao="props.tituloPadrao"
     :ocultar-titulo-modal="props.ocultarTituloModal"
+    :configuracao-blocos="props.configuracaoBlocos"
     mensagem-vazio="Nenhuma sala selecionada."
-    @before-save="$emit('before-save', $event)"
+    @before-save="$emit('before-save',$event)"
   >
     <template #topo>
       <div class="barra-filtros" v-if="recursosPermitidosNaMatriz.length > 0">
@@ -123,8 +134,8 @@ const limparFiltros = () => {
       </div>
     </template>
 
-    <template #campos-extras>
-      <slot name="campos-extras"></slot>
+    <template v-for="(_, nomeSlot) in $slots" :key="nomeSlot" #[nomeSlot]="slotProps">
+      <slot :name="nomeSlot" v-bind="slotProps ?? {}"></slot>
     </template>
   </AgendaMatrixBase>
 </template>