v-sistec-features 1.31.12 → 1.31.13

package/package.json

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

package/src/DataAgenda/VDataAgenda.vue

@@ -3,14 +3,16 @@
 O layout raiz que orquestra a interface com cabeçalhos modulares separados.
 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 e bloquear dias inativos no minicalendário lateral.
+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, 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';
@@ -19,142 +21,131 @@ import HeaderCalendario from './components/HeaderCalendario.vue';
 import HeaderTabela from './components/HeaderTabela.vue';
 
 const props = withDefaults(defineProps<{
-    modoLayout?: 'calendario' | 'tabela' | 'tabela-horario',
-    idRecursoUnico?: number | string | null,
-    usaInterceptador?: boolean,
-    usuarioLogado?: string,
-    tituloPadrao?: string,
-    ocultarTituloModal?: boolean,
-    configuracaoBlocos?: any,
-    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,
-    configuracaoBlocos: null
+  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']);
-
-// Armazena as referências e funções do composable de agenda para manipulação global.
 const {
-    dataSelecionada,
-    dataVisao,
-    agendasDisponiveis,
-    agendaSelecionada,
-    datasDesabilitadas,
-    carregarRecursosEAgendas
+  dataSelecionada,
+  dataVisao,
+  agendasDisponiveis,
+  agendaSelecionada,
+  datasDesabilitadas,
+  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);
 
-// Armazena a referência da instância principal do componente AgendaVueCal.
-const agendaVueCalRef = ref<any>(null);
-
-// Executa o carregamento inicial de recursos ao montar o componente na tela.
-onMounted(() => { carregarRecursosEAgendas(); });
-
-// Extrai de forma segura o objeto de data embutido na célula customizada do vue-cal.
-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;
-};
-
-// Recebe um objeto Date e devolve a string formatada em YYYY-MM-DD local.
-const formatarDataIsoCurta = (data: Date): string => {
-    const ano = data.getFullYear();
-    const mes = String(data.getMonth() + 1).padStart(2, '0');
-    const dia = String(data.getDate()).padStart(2, '0');
-    return `${ano}-${mes}-${dia}`;
-};
-
-// Devolve um Set para consulta rápida contendo todas as datas desabilitadas da agenda atual.
-const conjuntoDatasDesabilitadas = computed(() => {
-    return new Set<string>(datasDesabilitadas.value);
+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;
 });
 
-// Calcula e devolve um Set com as strings (YYYY-MM-DD) dos dias operacionais que já estão visíveis na grade tabela-horario.
-const datasVisiveisNaSemana = computed(() => {
-    const visiveis = new Set<string>();
-    if (props.modoLayout !== 'tabela-horario' || !dataSelecionada.value || !agendaSelecionada.value) {
-        return visiveis;
-    }
+const propriedadesModeloAtivo = computed(() => {
+  const base = {
+    usaInterceptador: props.usaInterceptador,
+    tituloPadrao: props.tituloPadrao,
+    ocultarTituloModal: props.ocultarTituloModal
+  };
+
+  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 agendaObj = agendasDisponiveis.value.find(
-        (a: any) => Number(a.id_agenda) === Number(agendaSelecionada.value)
-    );
-    if (!agendaObj || !agendaObj.detalhes) return visiveis;
+const recursosEmExibicao = computed(() => modeloAtivoRef.value?.recursosEmExibicao ?? []);
 
-    const diaInicioPython = Number(agendaObj.detalhes.dia_inicio_semana_agenda ?? 0);
-    const diasVisiveis = Number(agendaObj.detalhes.dias_visiveis_agenda ?? 6);
-    const diaInicioJs = (diaInicioPython + 1) % 7;
+defineExpose({ recursosEmExibicao });
 
-    let dataBase: Date;
-    if (typeof dataSelecionada.value === 'string') {
-        const apenasData = String(dataSelecionada.value).substring(0, 10);
-        const [ano, mes, dia] = apenasData.split('-').map(Number);
-        dataBase = new Date(ano!, mes! - 1, dia!);
-    } else {
-        const d = new Date(dataSelecionada.value);
-        dataBase = new Date(d.getFullYear(), d.getMonth(), d.getDate());
-    }
+onMounted(() => { carregarRecursosEAgendas(); });
 
-    const diff = (dataBase.getDay() - diaInicioJs + 7) % 7;
-    const inicioSemana = new Date(dataBase);
-    inicioSemana.setDate(dataBase.getDate() - diff);
+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;
+};
 
-    for (let i = 0; i < diasVisiveis; i++) {
-        const diaCorrente = new Date(inicioSemana);
-        diaCorrente.setDate(inicioSemana.getDate() + i);
-        visiveis.add(formatarDataIsoCurta(diaCorrente));
-    }
+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;
 });
 
-// Recebe a célula do minicalendário e devolve true se aquele dia da semana não funcionar na agenda.
 const ehDiaBloqueadoNoMini = (cell: any): boolean => {
-    const data = obterDataDaCelula(cell);
-    if (!data || props.modoLayout !== 'tabela-horario') return false;
-    return conjuntoDatasDesabilitadas.value.has(formatarDataIsoCurta(data));
+  const data = obterDataDaCelula(cell);
+  if (!data || props.modoLayout !== 'tabela-horario') return false;
+  return conjuntoDatasDesabilitadas.value.has(formatarDataIso(data));
 };
 
-// Recebe a célula do minicalendário e devolve true se ela já estiver sendo exibida na tabela atual.
 const ehDiaVisivelNaGrade = (cell: any): boolean => {
-    const data = obterDataDaCelula(cell);
-    if (!data || props.modoLayout !== 'tabela-horario') return false;
-    return datasVisiveisNaSemana.value.has(formatarDataIsoCurta(data));
+  const data = obterDataDaCelula(cell);
+  if (!data || props.modoLayout !== 'tabela-horario') return false;
+  return datasVisiveisNaSemana.value.has(formatarDataIso(data));
 };
 
-// Recebe nada. Devolve nada.
-// É usada para retrair ou expandir a aba esquerda de navegação rápida.
 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>
 
@@ -227,207 +218,53 @@ const mudarVisao = (novaVisao: string) => {
         </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>
-
-          <AgendaTabelaHorario
-            v-else-if="props.modoLayout === 'tabela-horario'"
-            :id-recurso-unico="props.idRecursoUnico"
-            :usa-interceptador="props.usaInterceptador"
-            :titulo-padrao="props.tituloPadrao"
-            :ocultar-titulo-modal="props.ocultarTituloModal"
-            :configuracao-blocos="props.configuracaoBlocos"
-            @before-save="$emit('before-save', $event)"
-          >
-            <template #campos-extras>
-              <slot name="campos-extras"></slot>
-            </template>
-          </AgendaTabelaHorario>
-
-          <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"
-            :configuracao-blocos="props.configuracaoBlocos"
+          <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>
-          </AgendaMatrixUnico>
-
-          <AgendaMatrix
-            v-else-if="props.modoLayout === 'tabela'"
-            :usa-interceptador="props.usaInterceptador"
-            :titulo-padrao="props.tituloPadrao"
-            :ocultar-titulo-modal="props.ocultarTituloModal"
-            :configuracao-blocos="props.configuracaoBlocos"
-            @before-save="$emit('before-save', $event)"
-          >
-            <template #campos-extras>
-              <slot name="campos-extras"></slot>
-            </template>
-          </AgendaMatrix>
+          </component>
         </main>
       </div>
     </div>
   </div>
 </template>
+
 <style lang="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; 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; }
-:deep(.calendario-mini .vuecal__cell--selected) { 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-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:not(.dia-semana-visivel)) { 
-    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; }
-
-/* Estilização específica para o modo tabela-horario no minicalendário */
-: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);
-}
-
-: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;
-}
-
-: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;
-}
-
-: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, repassa a configuração de blocos da agenda
-e gerencia o dropdown de seleção de salas preservando os filtros ativos ao mudar a data.
+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">
@@ -18,26 +19,18 @@ const props = defineProps({
 });
 
 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 = [];
@@ -54,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>
@@ -73,7 +82,7 @@ const limparFiltros = () => {
     :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">
@@ -125,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>