frontend/src/layout/ModalDocumentos.vue

<script setup>
import DocumentList from "../components/DocumentList.vue";
import DocumentUpload from "../components/DocumentUpload.vue";
import SearchBox from "../components/SearchBox.vue";
import { useSearch } from "../composables/useSearch.js";
import { usePainelDocumentos } from "../composables/usePainelDocumentos.js";
import { useDocumentos } from "../composables/useDocumentos.js";

const { painelAberto, tituloModal, fecharModal } = usePainelDocumentos();

const {
  results: searchResults,
  loading: searchLoading,
  error: searchError,
  run: runSearch,
} = useSearch();

const { docs, loadDocs, onIngested } = useDocumentos();
</script>

<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="painelAberto" class="fixed inset-0 z-[9999]">
        <div
          class="modal-backdrop absolute inset-0 bg-black/40 dark:bg-black/60"
          @click="fecharModal"
        />
        <div class="absolute inset-0 flex items-center justify-center p-4" @click="fecharModal">
          <div
            class="modal-panel w-full max-w-[980px] overflow-hidden rounded-2xl border border-gray-200 bg-background text-foreground shadow-xl dark:border-gray-700"
            @click.stop
          >
            <div
              class="flex items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700"
            >
              <div
                class="text-base font-semibold text-gray-900 dark:text-gray-100"
              >
                {{ tituloModal }}
              </div>
              <button
                type="button"
                class="rounded-lg border border-transparent p-1.5 text-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-100 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-white/5"
                @click="fecharModal"
              >
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div class="max-h-[calc(100vh-8rem)] overflow-auto p-5">
              <DocumentUpload
                v-if="painelAberto === 'update'"
                @ingested="onIngested"
              />
              <template v-else-if="painelAberto === 'documentos'">
                <SearchBox
                  :results="searchResults"
                  :loading="searchLoading"
                  :error="searchError"
                  @search="runSearch"
                />
                <div class="h-4" />
                <DocumentList
                  :items="docs.items"
                  :loading="docs.loading"
                  :error="docs.error"
                  @refresh="loadDocs"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.2s ease;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
.modal-enter-active .modal-panel,
.modal-leave-active .modal-panel {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.modal-enter-from .modal-panel,
.modal-leave-to .modal-panel {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}
</style>