acai-ui 1.65.5

package/src/components/swagger/acai-ui-swagger-operacao.vue

@@ -0,0 +1,372 @@
+<template>
+  <article
+    class="swagger-op"
+    :class="[`swagger-op--${operacao.metodo}`, { 'swagger-op--aberta': aberta }]"
+  >
+    <!-- Cabeçalho é <button>: abre com Enter/Espaço e o leitor de tela anuncia
+         o estado pelo aria-expanded (eMAG 2.1 / 4.3). -->
+    <button
+      type="button"
+      class="swagger-op__cabecalho"
+      :aria-expanded="aberta"
+      :aria-controls="idCorpo"
+      @click="alternar"
+    >
+      <span class="swagger-metodo" :class="`swagger-metodo--${operacao.metodo}`">
+        {{ operacao.metodo }}
+      </span>
+      <span class="swagger-op__path">{{ operacao.path }}</span>
+      <span class="swagger-op__resumo">{{ operacao.resumo }}</span>
+      <acai-ui-icon
+        v-if="operacao.depreciada"
+        name="warning_amber"
+        size="16px"
+        class="swagger-op__aviso"
+        aria-label="Endpoint depreciado"
+      />
+      <acai-ui-icon
+        v-if="operacao.exigeAutenticacao"
+        name="lock"
+        size="14px"
+        class="swagger-op__cadeado"
+        aria-label="Exige autenticação"
+      />
+      <acai-ui-icon name="expand_more" size="20px" class="swagger-op__seta" decorative />
+    </button>
+
+    <q-slide-transition>
+      <!-- `v-if`, não `v-show`: uma spec real tem centenas de operações e manter
+           o detalhe de todas montado enche o DOM de megabytes que ninguém vê. -->
+      <div v-if="aberta" :id="idCorpo" class="swagger-op__corpo">
+        <p v-if="operacao.descricao" class="swagger-op__descricao">{{ operacao.descricao }}</p>
+
+        <!-- Duas colunas em tela larga: o que se MANDA à esquerda, o que se
+             RECEBE à direita. Empilha sozinho abaixo do `md` (1024px). -->
+        <div class="swagger-op__colunas">
+          <div class="swagger-op__coluna">
+            <!-- ===================== Parâmetros ===================== -->
+            <section v-if="operacao.parametros.length" class="swagger-bloco">
+              <h4 class="swagger-bloco__titulo">
+                Parâmetros
+                <span class="swagger-bloco__contagem">{{ operacao.parametros.length }}</span>
+              </h4>
+              <div class="swagger-params">
+                <div
+                  v-for="parametro in operacao.parametros"
+                  :key="chaveParametro(parametro)"
+                  class="swagger-param"
+                >
+                  <div class="swagger-param__rotulo">
+                    <span class="swagger-param__nome">
+                      {{ parametro.nome }}
+                      <abbr
+                        v-if="parametro.obrigatorio"
+                        title="obrigatório"
+                        class="swagger-param__req"
+                      >
+                        *
+                      </abbr>
+                    </span>
+                    <span class="swagger-param__meta">
+                      <span class="swagger-param__onde">{{ parametro.onde }}</span>
+                      <span class="swagger-param__tipo">{{ parametro.tipo }}</span>
+                    </span>
+                  </div>
+                  <div class="swagger-param__valor">
+                    <!-- Valores fechados (enum ou boolean) viram <select>: digitar
+                         à mão um enum é a fonte nº 1 de 400 nesta tela. Os valores
+                         vão crus, como o servidor espera. -->
+                    <label
+                      v-if="podeExecutar && parametro.opcoes.length"
+                      class="swagger-select swagger-select--campo"
+                    >
+                      <select
+                        v-model="valores[chaveParametro(parametro)]"
+                        :aria-label="`Valor de ${parametro.nome}`"
+                        :required="parametro.obrigatorio"
+                      >
+                        <!-- Opção vazia só quando o campo é opcional: sem ela não
+                             dá pra "desescolher" e o parâmetro iria sempre. -->
+                        <option v-if="!parametro.obrigatorio" value="">(não enviar)</option>
+                        <option v-for="opcao in parametro.opcoes" :key="opcao" :value="opcao">
+                          {{ opcao }}
+                        </option>
+                      </select>
+                    </label>
+                    <input
+                      v-else-if="podeExecutar"
+                      v-model="valores[chaveParametro(parametro)]"
+                      class="swagger-input"
+                      :aria-label="`Valor de ${parametro.nome}`"
+                      :placeholder="placeholderDe(parametro)"
+                      :required="parametro.obrigatorio"
+                    />
+                    <span v-else class="swagger-param__exemplo">
+                      {{ parametro.opcoes.length ? parametro.opcoes.join(' | ') : placeholderDe(parametro) }}
+                    </span>
+                    <p v-if="parametro.descricao" class="swagger-param__descricao">
+                      {{ parametro.descricao }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ===================== Corpo ===================== -->
+            <section v-if="operacao.corpo" class="swagger-bloco">
+              <h4 class="swagger-bloco__titulo">
+                Corpo
+                <abbr
+                  v-if="operacao.corpo.obrigatorio"
+                  title="obrigatório"
+                  class="swagger-param__req"
+                >
+                  *
+                </abbr>
+                <label v-if="operacao.corpo.tiposConteudo.length > 1" class="swagger-select">
+                  <select v-model="contentType" aria-label="Content-Type">
+                    <option v-for="tipo in operacao.corpo.tiposConteudo" :key="tipo" :value="tipo">
+                      {{ tipo }}
+                    </option>
+                  </select>
+                </label>
+                <span v-else class="swagger-tag">{{ operacao.corpo.tipoConteudoPadrao }}</span>
+                <acai-ui-button
+                  v-if="podeExecutar"
+                  flat
+                  dense
+                  size="sm"
+                  class="swagger-bloco__acao"
+                  label="Restaurar exemplo"
+                  icon="refresh"
+                  @click="restaurarCorpo"
+                />
+              </h4>
+              <p v-if="operacao.corpo.descricao" class="swagger-bloco__descricao">
+                {{ operacao.corpo.descricao }}
+              </p>
+
+              <!-- Editável E realçado: o `v-model` liga o modo editor do
+                   acai-ui-code, que mantém o realce enquanto se digita. -->
+              <acai-ui-code
+                v-if="podeExecutar"
+                v-model="corpo"
+                aria-label="Corpo da requisição"
+                :copiavel="false"
+              />
+              <acai-ui-code v-else :value="exemploCorpo" max-height="420px" />
+
+              <details v-if="operacao.corpo.schema" class="swagger-detalhe">
+                <summary>Campos do schema</summary>
+                <acai-ui-swagger-schema :doc="doc" :schema="operacao.corpo.schema" />
+              </details>
+            </section>
+
+            <p v-if="!operacao.parametros.length && !operacao.corpo" class="swagger-op__vazio">
+              Esta operação não recebe parâmetros nem corpo.
+            </p>
+          </div>
+
+          <div class="swagger-op__coluna">
+            <!-- ===================== Executar ===================== -->
+            <section v-if="podeExecutar" class="swagger-executar">
+              <div class="swagger-executar__acoes">
+                <acai-ui-button
+                  label="Executar"
+                  icon="play_arrow"
+                  size="sm"
+                  :loading="executando"
+                  @click="executar"
+                />
+                <acai-ui-button
+                  flat
+                  dense
+                  size="sm"
+                  label="cURL"
+                  icon="content_copy"
+                  @click="copiarCurl"
+                />
+                <acai-ui-button
+                  v-if="resultado"
+                  flat
+                  dense
+                  size="sm"
+                  label="Limpar"
+                  icon="close"
+                  @click="resultado = null"
+                />
+              </div>
+              <p class="swagger-executar__url">
+                <span class="swagger-metodo" :class="`swagger-metodo--${operacao.metodo}`">
+                  {{ operacao.metodo }}
+                </span>
+                <span class="swagger-executar__endereco">{{ urlPrevia }}</span>
+              </p>
+
+              <div v-if="resultado" class="swagger-resultado" role="status" aria-live="polite">
+                <acai-ui-banner v-if="resultado.erroRede" type="error" title="A requisição não saiu">
+                  {{ resultado.erroRede }} — verifique se o servidor está no ar e se ele libera
+                  CORS para a origem do app.
+                </acai-ui-banner>
+
+                <template v-else>
+                  <div class="swagger-resultado__linha">
+                    <span class="swagger-status" :class="classeStatus(String(resultado.status))">
+                      {{ resultado.status }} {{ resultado.statusTexto }}
+                    </span>
+                    <span class="swagger-resultado__meta">{{ resultado.tempoMs }} ms</span>
+                    <span class="swagger-resultado__meta">{{ tamanhoLegivel }}</span>
+                  </div>
+                  <!-- O botão de copiar vem do próprio bloco de código, por isso
+                       saiu da linha de status. -->
+                  <acai-ui-code :value="resultado.corpo || '(sem corpo)'" max-height="480px" />
+                </template>
+              </div>
+            </section>
+
+            <!-- ===================== Respostas ===================== -->
+            <section v-if="operacao.respostas.length" class="swagger-bloco">
+              <h4 class="swagger-bloco__titulo">Respostas previstas</h4>
+              <div
+                v-for="resposta in operacao.respostas"
+                :key="resposta.status"
+                class="swagger-resposta"
+              >
+                <div class="swagger-resposta__linha">
+                  <span class="swagger-status" :class="classeStatus(resposta.status)">
+                    {{ resposta.status }}
+                  </span>
+                  <span class="swagger-resposta__descricao">{{ resposta.descricao }}</span>
+                  <span v-if="resposta.tipoConteudo" class="swagger-tag">
+                    {{ resposta.tipoConteudo }}
+                  </span>
+                </div>
+                <details v-if="resposta.exemplo !== null" class="swagger-detalhe">
+                  <summary>Exemplo</summary>
+                  <acai-ui-code :value="resposta.exemplo" max-height="360px" />
+                </details>
+                <details v-if="resposta.schema" class="swagger-detalhe">
+                  <summary>Campos do schema</summary>
+                  <acai-ui-swagger-schema :doc="doc" :schema="resposta.schema" />
+                </details>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </q-slide-transition>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { copyToClipboard } from 'quasar'
+import AcaiUiBanner from '../banner/acai-ui-banner.vue'
+import AcaiUiButton from '../button/acai-ui-button.vue'
+import AcaiUiCode from '../code/acai-ui-code.vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import AcaiUiSwaggerSchema from './acai-ui-swagger-schema.vue'
+import { notificacao } from '../../hooks/notify'
+import { gerarId } from '../../utils/gerador-id'
+import { FileUtils } from '../../utils/file-utils'
+import type { SwaggerOperacaoProps } from './acai-ui-swagger-interface'
+import type { ParametroNormalizado } from './openapi-tipos'
+import {
+  chaveParametro,
+  executarRequisicao,
+  montarCurl,
+  montarUrl,
+  type EntradaExecucao,
+  type ResultadoExecucao,
+  type ValoresParametros,
+} from './acai-ui-swagger-requisicao'
+
+const props = defineProps<SwaggerOperacaoProps>()
+
+const aberta = ref(false)
+const idCorpo = gerarId(props.operacao.id, 'swagger-op')
+
+const valores = ref<ValoresParametros>({})
+const corpo = ref('')
+const contentType = ref(props.operacao.corpo?.tipoConteudoPadrao ?? 'application/json')
+const executando = ref(false)
+const resultado = ref<ResultadoExecucao | null>(null)
+
+const podeExecutar = computed(() => !props.hideExecute)
+
+const paraJson = (valor: unknown): string =>
+  typeof valor === 'string' ? valor : JSON.stringify(valor, null, 2)
+
+const exemploCorpo = computed(() => paraJson(props.operacao.corpo?.exemplo ?? null))
+
+function restaurarCorpo(): void {
+  corpo.value = exemploCorpo.value
+}
+
+// Preenche a caixa do corpo só quando a operação é aberta pela primeira vez:
+// gerar o exemplo de todas as operações de uma spec grande no carregamento
+// custaria caro e quase nenhuma delas seria aberta.
+watch(aberta, (abriu) => {
+  if (abriu && !corpo.value && props.operacao.corpo) restaurarCorpo()
+})
+
+function alternar(): void {
+  aberta.value = !aberta.value
+}
+
+function placeholderDe(parametro: ParametroNormalizado): string {
+  if (parametro.exemplo === undefined || parametro.exemplo === null) return parametro.tipo
+  return String(parametro.exemplo)
+}
+
+const entrada = computed<EntradaExecucao>(() => ({
+  operacao: props.operacao,
+  baseUrl: props.baseUrl,
+  valores: valores.value,
+  corpo: corpo.value,
+  contentType: contentType.value,
+  ...(props.headers ? { headers: props.headers } : {}),
+  ...(props.withCredentials ? { withCredentials: true } : {}),
+}))
+
+const urlPrevia = computed(() => montarUrl(entrada.value))
+
+const tamanhoLegivel = computed(() =>
+  resultado.value ? FileUtils.formatarTamanhoArquivo(resultado.value.tamanhoBytes) : '',
+)
+
+/** Faixa do status vira cor: 2xx ok, 3xx neutro, 4xx atenção, 5xx erro. */
+function classeStatus(status: string): string {
+  const faixa = status.charAt(0)
+  if (faixa === '2') return 'swagger-status--ok'
+  if (faixa === '4') return 'swagger-status--alerta'
+  if (faixa === '5' || status === '0') return 'swagger-status--erro'
+  return 'swagger-status--neutro'
+}
+
+async function executar(): Promise<void> {
+  executando.value = true
+  try {
+    resultado.value = await executarRequisicao(entrada.value)
+  } finally {
+    executando.value = false
+  }
+}
+
+async function copiarCurl(): Promise<void> {
+  await copyToClipboard(montarCurl(entrada.value))
+  notificacao({ color: 'positive', message: 'cURL copiado.' })
+}
+
+// Exposto pra casca conseguir fechar tudo de uma vez.
+defineExpose({
+  abrir: () => {
+    aberta.value = true
+  },
+  fechar: () => {
+    aberta.value = false
+  },
+})
+</script>
+
+<style src="./acai-ui-swagger-styles.scss" lang="scss" />

package/src/components/swagger/acai-ui-swagger-requisicao.ts

@@ -0,0 +1,272 @@
+// Montagem e disparo da requisição do "Executar".
+//
+// Tudo que decide COMO a chamada fica (url, query, cabeçalhos, cURL) é função
+// pura e testável; só `executarRequisicao` toca a rede. `fetch` em vez de axios
+// de propósito: a lib não tem axios como dependência e não vai ganhar uma por
+// causa desta tela.
+
+import type { OperacaoNormalizada, ParametroNormalizado } from './openapi-tipos'
+
+/** Chave de um parâmetro no mapa de valores — nome sozinho colide (`id` em path e query). */
+export function chaveParametro(parametro: ParametroNormalizado): string {
+  return `${parametro.onde}:${parametro.nome}`
+}
+
+/** Valores digitados pelo usuário, indexados por `chaveParametro`. */
+export type ValoresParametros = Record<string, string>
+
+export interface EntradaExecucao {
+  operacao: OperacaoNormalizada
+  baseUrl: string
+  valores: ValoresParametros
+  /** Corpo cru, como está na caixa de edição. Só vai quando o método aceita corpo. */
+  corpo?: string
+  contentType?: string
+  headers?: Record<string, string>
+  withCredentials?: boolean
+}
+
+export interface ResultadoExecucao {
+  /** `false` também quando a requisição nem saiu (rede/CORS) — ver `erroRede`. */
+  ok: boolean
+  status: number
+  statusTexto: string
+  tempoMs: number
+  tamanhoBytes: number
+  /** Corpo da resposta como texto; JSON já vem indentado. */
+  corpo: string
+  tipoConteudo: string
+  headers: Record<string, string>
+  /** Mensagem de falha de rede/CORS. `null` quando o servidor respondeu (mesmo 500). */
+  erroRede: string | null
+  url: string
+}
+
+/**
+ * Pistas de que a URL JÁ aponta para o documento, e não para o host. Sem isto,
+ * completar às cegas transformaria `/v3/api-docs` em `/v3/api-docs/v3/api-docs`.
+ */
+const PISTAS_DE_DOCUMENTO = [/api-docs/i, /openapi/i, /\.json(\?|$)/i, /\.ya?ml(\?|$)/i]
+
+/**
+ * Completa a URL do documento quando vem só o host.
+ *
+ * É o erro mais comum ao usar a tela: cola-se `http://host:8080` (ou o endereço
+ * do Swagger UI, que é uma PÁGINA, não o documento) e a requisição volta HTML.
+ * Spring Boot publica o JSON em `/v3/api-docs`, então é isso que completamos.
+ */
+export function normalizarUrlDocumento(url: string | undefined): string {
+  const limpo = (url ?? '').trim()
+  if (!limpo) return ''
+
+  // `/swagger-ui/index.html` é a interface do Swagger, não a spec: volta pra
+  // raiz do servidor e pega o documento de lá.
+  if (/swagger-ui/i.test(limpo)) {
+    try {
+      return `${new URL(limpo).origin}/v3/api-docs`
+    } catch {
+      return '/v3/api-docs'
+    }
+  }
+
+  if (PISTAS_DE_DOCUMENTO.some((pista) => pista.test(limpo))) return limpo
+
+  return `${limpo.replace(/\/+$/, '')}/v3/api-docs`
+}
+
+/**
+ * Monta o `Authorization` a partir do que o usuário digitou. Aceita o token cru
+ * ou já com o prefixo — colar do DevTools traz `Bearer …` junto na metade das
+ * vezes, e duplicar o prefixo dá 401 sem explicação.
+ */
+export function montarAutorizacao(token: string): string {
+  const limpo = token.trim()
+  if (!limpo) return ''
+  return /^bearer\s/i.test(limpo) ? limpo : `Bearer ${limpo}`
+}
+
+/**
+ * Base das chamadas quando o consumidor não passa `baseUrl`.
+ *
+ * Spring Boot publica `servers: [{ url: '/' }]` com muita frequência — relativo
+ * ao host que serviu o documento, que NÃO é o host do app (o front roda em
+ * :9000 e a API em :32243). Por isso a origem sai da URL do próprio documento,
+ * e não de `window.location`, que mandaria a chamada pro dev server.
+ */
+export function resolverBaseUrl(
+  servidores: string[],
+  urlDocumento: string | undefined,
+  origemPadrao: string,
+): string {
+  const servidor = servidores[0] ?? ''
+  if (/^https?:\/\//i.test(servidor)) return servidor
+
+  const origem = urlDocumento
+    ? new URL(urlDocumento, origemPadrao).origin
+    : origemPadrao
+
+  // `/` significa "a própria raiz" — concatenar deixaria `http://host//pessoas`.
+  if (!servidor || servidor === '/') return origem
+  return `${origem}${servidor.startsWith('/') ? servidor : `/${servidor}`}`
+}
+
+/** Métodos que carregam corpo. GET/HEAD com body são recusados pelo próprio `fetch`. */
+const METODOS_COM_CORPO = ['post', 'put', 'patch', 'delete']
+
+export function aceitaCorpo(operacao: OperacaoNormalizada): boolean {
+  return METODOS_COM_CORPO.includes(operacao.metodo) && operacao.corpo !== null
+}
+
+/** Junta base e path sem gerar `//` no meio nem perder o prefixo da base. */
+function juntarUrl(base: string, path: string): string {
+  if (!base) return path
+  return `${base.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`
+}
+
+/**
+ * Substitui `{id}` no path e monta a query string.
+ *
+ * Parâmetro vazio é OMITIDO em vez de virar `?nome=`: um filtro opcional em
+ * branco não deve chegar ao backend (mesma regra do `limparCamposVazios`).
+ * Path param vazio fica como está (`{id}`) — a URL sai visivelmente quebrada,
+ * que é melhor do que bater numa rota errada por concatenação silenciosa.
+ */
+export function montarUrl(entrada: EntradaExecucao): string {
+  const { operacao, baseUrl, valores } = entrada
+
+  let path = operacao.path
+  for (const parametro of operacao.parametros) {
+    if (parametro.onde !== 'path') continue
+    const valor = valores[chaveParametro(parametro)] ?? ''
+    if (!valor) continue
+    path = path.replace(`{${parametro.nome}}`, encodeURIComponent(valor))
+  }
+
+  const query = new URLSearchParams()
+  for (const parametro of operacao.parametros) {
+    if (parametro.onde !== 'query') continue
+    const valor = valores[chaveParametro(parametro)] ?? ''
+    if (!valor) continue
+    query.append(parametro.nome, valor)
+  }
+
+  const busca = query.toString()
+  return busca ? `${juntarUrl(baseUrl, path)}?${busca}` : juntarUrl(baseUrl, path)
+}
+
+/**
+ * Cabeçalhos finais: os do app (token) + os declarados como parâmetro `header`
+ * na spec + o `Content-Type` quando a chamada leva corpo. O parâmetro da spec
+ * ganha do cabeçalho global — foi digitado agora, para esta chamada.
+ */
+export function montarCabecalhos(entrada: EntradaExecucao): Record<string, string> {
+  const cabecalhos: Record<string, string> = { ...(entrada.headers ?? {}) }
+
+  for (const parametro of entrada.operacao.parametros) {
+    if (parametro.onde !== 'header') continue
+    const valor = entrada.valores[chaveParametro(parametro)] ?? ''
+    if (valor) cabecalhos[parametro.nome] = valor
+  }
+
+  if (aceitaCorpo(entrada.operacao) && entrada.corpo?.trim()) {
+    cabecalhos['Content-Type'] = entrada.contentType || 'application/json'
+  }
+
+  return cabecalhos
+}
+
+/** Aspas simples do shell: só `'` precisa de escape, e é `'\''`. */
+function aspasShell(texto: string): string {
+  return `'${texto.replace(/'/g, `'\\''`)}'`
+}
+
+/**
+ * cURL equivalente — é como o dev leva a chamada para o terminal, para o
+ * colega do backend ou para um ticket. Espelha exatamente o que seria enviado.
+ */
+export function montarCurl(entrada: EntradaExecucao): string {
+  // Método e URL na MESMA linha; só cabeçalhos e corpo quebram — é o formato que
+  // o Swagger UI mostra e o que fica legível quando colado no terminal.
+  const partes = [
+    `curl -X ${entrada.operacao.metodo.toUpperCase()} ${aspasShell(montarUrl(entrada))}`,
+  ]
+
+  for (const [nome, valor] of Object.entries(montarCabecalhos(entrada))) {
+    partes.push(`-H ${aspasShell(`${nome}: ${valor}`)}`)
+  }
+
+  if (aceitaCorpo(entrada.operacao) && entrada.corpo?.trim()) {
+    partes.push(`-d ${aspasShell(entrada.corpo)}`)
+  }
+
+  return partes.join(' \\\n  ')
+}
+
+/** JSON sai indentado; qualquer outra coisa (HTML de erro, texto) sai como veio. */
+function formatarCorpo(texto: string, tipoConteudo: string): string {
+  if (!texto) return ''
+  if (!tipoConteudo.includes('json')) return texto
+  try {
+    return JSON.stringify(JSON.parse(texto), null, 2)
+  } catch {
+    return texto
+  }
+}
+
+export async function executarRequisicao(entrada: EntradaExecucao): Promise<ResultadoExecucao> {
+  const url = montarUrl(entrada)
+  const inicio = performance.now()
+
+  const base: Omit<ResultadoExecucao, 'ok' | 'status' | 'statusTexto'> = {
+    tempoMs: 0,
+    tamanhoBytes: 0,
+    corpo: '',
+    tipoConteudo: '',
+    headers: {},
+    erroRede: null,
+    url,
+  }
+
+  try {
+    const resposta = await fetch(url, {
+      method: entrada.operacao.metodo.toUpperCase(),
+      headers: montarCabecalhos(entrada),
+      ...(aceitaCorpo(entrada.operacao) && entrada.corpo?.trim() ? { body: entrada.corpo } : {}),
+      ...(entrada.withCredentials ? { credentials: 'include' as const } : {}),
+    })
+
+    const texto = await resposta.text()
+    const tipoConteudo = resposta.headers.get('content-type') ?? ''
+    const headers: Record<string, string> = {}
+    resposta.headers.forEach((valor, nome) => {
+      headers[nome] = valor
+    })
+
+    return {
+      ...base,
+      ok: resposta.ok,
+      status: resposta.status,
+      statusTexto: resposta.statusText,
+      tempoMs: Math.round(performance.now() - inicio),
+      tamanhoBytes: new Blob([texto]).size,
+      corpo: formatarCorpo(texto, tipoConteudo),
+      tipoConteudo,
+      headers,
+    }
+  } catch (erro) {
+    // `fetch` só rejeita quando a requisição não chegou a acontecer: DNS,
+    // servidor fora, CORS. O status HTTP de erro (4xx/5xx) cai no caminho de
+    // cima — daí `status: 0` aqui, que a tela mostra como "sem resposta".
+    return {
+      ...base,
+      ok: false,
+      status: 0,
+      statusTexto: '',
+      tempoMs: Math.round(performance.now() - inicio),
+      erroRede:
+        erro instanceof Error && erro.message
+          ? erro.message
+          : 'A requisição não chegou ao servidor.',
+    }
+  }
+}

package/src/components/swagger/acai-ui-swagger-schema.vue

@@ -0,0 +1,36 @@
+<template>
+  <acai-ui-code :value="conteudo" max-height="360px" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import AcaiUiCode from '../code/acai-ui-code.vue'
+import { descreverTipo, resolverSchemaParaExibicao } from './openapi-normalizar'
+import type { DocumentoOpenApi, SchemaOpenApi } from './openapi-tipos'
+
+/**
+ * Mostra o schema como JSON, com `$ref` e `allOf` já resolvidos.
+ *
+ * Era uma lista de campos (`<ul>`); virou bloco de código a pedido do time —
+ * o formato JSON é o que o dev compara com o payload real na mão. A informação
+ * não se perdeu: `type`, `format`, `enum`, `required`, `description`,
+ * `readOnly` e `deprecated` continuam saindo, agora aninhados como no
+ * documento original.
+ *
+ * O corte de ciclo mora em `resolverSchemaParaExibicao` (schema de Spring Boot
+ * é recursivo com frequência).
+ */
+const props = defineProps<{
+  doc: DocumentoOpenApi
+  schema: SchemaOpenApi | null
+  profundidade?: number | undefined
+}>()
+
+const conteudo = computed<unknown>(() => {
+  const resolvido = resolverSchemaParaExibicao(props.doc, props.schema)
+  // Schema primitivo (string, enum solto, array de primitivo) não tem corpo
+  // que valha um bloco JSON — uma linha com o tipo legível diz mais.
+  if (resolvido === null) return descreverTipo(props.doc, props.schema)
+  return resolvido
+})
+</script>