acai-ui 1.65.5

package/src/components/swagger/acai-ui-swagger-styles.scss

@@ -0,0 +1,883 @@
+// Estilos do AcaiUiSwagger (casca + operação + schema no mesmo arquivo: as três
+// partes compartilham classes e nenhum <style scoped> alcançaria as filhas).
+//
+// Só tokens `--acai-*` e `--q-*`: nada de hex fixo, senão a tela morre no tema
+// escuro e não recolore no daltônico.
+
+@import '../../scss/breakpoints';
+
+$swagger-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
+
+.swagger {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  // ===================== Cabeçalho =====================
+  &__topo {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__identidade {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__titulo {
+    margin: 0;
+    font-size: 1.0625rem;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--acai-heading);
+  }
+
+  &__contagem {
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+  }
+
+  &__recarregar {
+    margin-left: auto;
+  }
+
+  &__descricao {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--acai-text-muted);
+  }
+
+  &__servidor {
+    margin: 0;
+    font-family: $swagger-mono;
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+    word-break: break-all;
+  }
+
+  // ===================== Barra de filtros =====================
+  // Fica no fluxo normal, logo abaixo do cabeçalho. Já foi `position: sticky`,
+  // mas grudar no topo rouba altura útil da lista o tempo todo e a sombra
+  // atravessava o conteúdo ao rolar.
+  &__ferramentas {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    padding: 4px 0 12px;
+  }
+
+  &__busca {
+    // Campo de canto: ocupa o necessário, não a largura toda.
+    width: 100%;
+    max-width: 340px;
+
+    // O campo do Quasar reserva uma faixa embaixo pra mensagem de erro. Aqui
+    // não há validação nenhuma, e a faixa só abria um vão entre a busca e a
+    // lista. (Seletor descendente, não `:deep()`: esta folha não é scoped.)
+    .q-field__bottom {
+      display: none;
+    }
+  }
+
+  &__estado {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 24px;
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Token =====================
+.swagger-token {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 10px;
+  border: 1px solid var(--acai-border);
+  border-radius: 6px;
+  background: var(--acai-surface-2);
+
+  &__selo {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin-left: auto;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid var(--acai-border);
+    background: none;
+    cursor: pointer;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--acai-text-muted);
+
+    &:hover {
+      background: var(--acai-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: 2px;
+    }
+
+    // Sem token, toda chamada protegida volta 401 — o selo avisa antes.
+    &--sem {
+      color: var(--acai-negative);
+      border-color: currentColor;
+    }
+  }
+
+  &__campo {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  &__rotulo {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--acai-text-muted);
+  }
+
+  &__acoes {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__dica {
+    margin: 0;
+    font-size: 0.6875rem;
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Selo de método =====================
+// Uma classe só, usada na linha da operação, no filtro e na prévia da URL —
+// método sempre com a mesma cor e a mesma caixa, onde quer que apareça.
+.swagger-metodo {
+  --swagger-cor: var(--acai-text-muted);
+  --swagger-cor-texto: #fff;
+
+  display: inline-block;
+  flex-shrink: 0;
+  min-width: 62px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background: var(--swagger-cor);
+  color: var(--swagger-cor-texto);
+  font-family: $swagger-mono;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.4;
+  text-align: center;
+  text-transform: uppercase;
+
+  // Cor por método vem de `--q-*` pra recolorir junto com o resto no daltônico.
+  &--get {
+    --swagger-cor: var(--q-info);
+  }
+  &--post {
+    --swagger-cor: var(--q-positive);
+  }
+  &--put {
+    --swagger-cor: var(--q-warning);
+    --swagger-cor-texto: #1d1d1d;
+  }
+  &--patch {
+    --swagger-cor: var(--q-accent);
+  }
+  &--delete {
+    --swagger-cor: var(--q-negative);
+  }
+
+}
+
+// Bolinha de método no cabeçalho do grupo — diz o que tem lá dentro sem abrir.
+.swagger-ponto {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+  background: var(--acai-text-muted);
+
+  &--get {
+    background: var(--q-info);
+  }
+  &--post {
+    background: var(--q-positive);
+  }
+  &--put {
+    background: var(--q-warning);
+  }
+  &--patch {
+    background: var(--q-accent);
+  }
+  &--delete {
+    background: var(--q-negative);
+  }
+}
+
+// Etiqueta neutra (versão, content-type).
+.swagger-tag {
+  font-family: $swagger-mono;
+  font-size: 0.6875rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--acai-border);
+  color: var(--acai-text-muted);
+  white-space: nowrap;
+  // Herdaria o uppercase do título do bloco e viraria "APPLICATION/JSON".
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+// ===================== Grupo (tag) =====================
+.swagger-grupo {
+  border: 1px solid var(--acai-border);
+  border-radius: 8px;
+  background: var(--acai-surface);
+  overflow: hidden;
+
+  &__cabecalho {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 12px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--acai-text);
+
+    &:hover {
+      background: var(--acai-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: -2px;
+    }
+  }
+
+  &__identidade {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  &__titulo {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--acai-heading);
+  }
+
+  &__descricao {
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__metodos {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    flex-shrink: 0;
+  }
+
+  &__contagem {
+    flex-shrink: 0;
+    min-width: 24px;
+    text-align: center;
+    font-size: 0.75rem;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--acai-surface-2);
+    color: var(--acai-text-muted);
+  }
+
+  &__lista {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 2px 8px 8px;
+  }
+}
+
+// ===================== Operação =====================
+.swagger-op {
+  // Sem isto, abrir uma operação e rolar até ela deixa o cabeçalho embaixo da
+  // barra de filtros grudada no topo.
+  scroll-margin-top: 80px;
+  border: 1px solid var(--acai-border-subtle);
+  border-left: 4px solid var(--swagger-cor, var(--acai-border));
+  border-radius: 6px;
+  background: var(--acai-surface);
+
+  // A cor da faixa lateral e do verbo na prévia da URL saem daqui.
+  &--get {
+    --swagger-cor: var(--q-info);
+  }
+  &--post {
+    --swagger-cor: var(--q-positive);
+  }
+  &--put {
+    --swagger-cor: var(--q-warning);
+  }
+  &--patch {
+    --swagger-cor: var(--q-accent);
+  }
+  &--delete {
+    --swagger-cor: var(--q-negative);
+  }
+
+  &--depreciada .swagger-op__path {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+
+  &--aberta {
+    background: var(--acai-surface-2);
+    border-color: var(--acai-border);
+  }
+
+  &__cabecalho {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 10px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--acai-text);
+
+    &:hover {
+      background: var(--acai-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: -2px;
+    }
+  }
+
+  &__path {
+    flex-shrink: 0;
+    font-family: $swagger-mono;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--acai-text);
+  }
+
+  &__resumo {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8125rem;
+    color: var(--acai-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__aviso,
+  &__cadeado {
+    flex-shrink: 0;
+    color: var(--acai-text-muted);
+  }
+
+  &__seta {
+    flex-shrink: 0;
+    color: var(--acai-text-muted);
+    transition: transform 0.2s ease;
+
+    .swagger-op--aberta & {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__corpo {
+    padding: 2px 12px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__descricao {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--acai-text);
+    white-space: pre-line;
+  }
+
+  // O que se MANDA à esquerda, o que se RECEBE à direita. Uma coluna só quando
+  // não há largura pra duas — o corpo JSON some se espremido.
+  &__colunas {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+
+    @include de-laptop {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+
+  &__coluna {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  &__vazio {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-style: italic;
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Blocos internos =====================
+.swagger-bloco {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &__titulo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--acai-text-muted);
+  }
+
+  &__contagem {
+    font-weight: 600;
+    letter-spacing: 0;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: var(--acai-surface-hover);
+  }
+
+  &__acao {
+    margin-left: auto;
+  }
+
+  &__descricao {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Parâmetros =====================
+.swagger-params {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--acai-border-subtle);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.swagger-param {
+  display: grid;
+  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
+  gap: 4px 12px;
+  align-items: center;
+  padding: 7px 10px;
+
+  & + & {
+    border-top: 1px solid var(--acai-border-subtle);
+  }
+
+  @include ate-mobile {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  &__rotulo {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  &__nome {
+    font-family: $swagger-mono;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--acai-text);
+    overflow-wrap: anywhere;
+  }
+
+  &__req {
+    color: var(--acai-negative);
+    font-weight: 700;
+    text-decoration: none;
+    cursor: help;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__tipo {
+    font-family: $swagger-mono;
+    font-size: 0.6875rem;
+    color: var(--acai-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__onde {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: var(--acai-surface-hover);
+    color: var(--acai-text-muted);
+  }
+
+  &__valor {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__descricao {
+    margin: 0;
+    font-size: 0.6875rem;
+    color: var(--acai-text-muted);
+  }
+
+  &__exemplo {
+    font-family: $swagger-mono;
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Campos crus =====================
+// Input/textarea nativos em vez de q-input: aqui são dezenas de campos densos
+// numa tabela técnica, e o field do Quasar traz altura e label que só atrapalham.
+.swagger-input,
+.swagger-textarea {
+  width: 100%;
+  font-family: $swagger-mono;
+  font-size: 0.8125rem;
+  color: var(--acai-text);
+  background: var(--acai-elevated);
+  border: 1px solid var(--acai-border);
+  border-radius: 4px;
+  padding: 5px 8px;
+
+  &:focus-visible {
+    outline: 2px solid var(--acai-control-on);
+    outline-offset: -1px;
+  }
+}
+
+.swagger-textarea {
+  resize: vertical;
+  line-height: 1.55;
+  min-height: 160px;
+}
+
+.swagger-select select {
+  font-family: $swagger-mono;
+  font-size: 0.6875rem;
+  color: var(--acai-text);
+  background: var(--acai-elevated);
+  border: 1px solid var(--acai-border);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+// Como CAMPO de parâmetro (enum/boolean), o select entra no lugar de um
+// `.swagger-input` e tem que casar com ele: mesma largura, altura e tipografia.
+// O tamanho miúdo acima é do seletor de Content-Type, que vive no cabeçalho.
+.swagger-select--campo {
+  display: block;
+  width: 100%;
+
+  select {
+    width: 100%;
+    font-size: 0.8125rem;
+    padding: 5px 8px;
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: -1px;
+    }
+  }
+}
+
+.swagger-json {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: var(--acai-elevated);
+  border: 1px solid var(--acai-border-subtle);
+  font-family: $swagger-mono;
+  font-size: 0.75rem;
+  line-height: 1.55;
+  color: var(--acai-text);
+  overflow: auto;
+  max-height: 300px;
+  white-space: pre;
+
+  &--resposta {
+    max-height: 380px;
+  }
+}
+
+// `<details>` sem cara de caixa: vira um link discreto que só ocupa espaço
+// quando aberto (antes o contorno cheio parecia um campo de formulário vazio).
+.swagger-detalhe {
+  > summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    width: fit-content;
+    cursor: pointer;
+    padding: 2px 0;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    // `--acai-info` e não `--acai-control-on`: no escuro o control-on (#3a80d0)
+    // dá 3,6:1 neste texto de 11px sobre a superfície secundária. O azul da
+    // rampa 300 sobe para 5,5:1 e continua lendo como "link/informativo".
+    color: var(--acai-info);
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::before {
+      content: '▸';
+      font-size: 0.75rem;
+      line-height: 1;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: 2px;
+    }
+  }
+
+  &[open] > summary::before {
+    content: '▾';
+  }
+
+  > *:not(summary) {
+    margin-top: 6px;
+  }
+}
+
+// ===================== Respostas =====================
+.swagger-resposta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 7px 0;
+
+  & + & {
+    border-top: 1px dashed var(--acai-border-subtle);
+  }
+
+  &__linha {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__descricao {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8125rem;
+    color: var(--acai-text);
+  }
+}
+
+.swagger-status {
+  font-family: $swagger-mono;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 1px 8px;
+  border-radius: 4px;
+  border: 1px solid currentColor;
+  white-space: nowrap;
+
+  &--ok {
+    color: var(--acai-positive, var(--q-positive));
+  }
+  &--alerta {
+    color: var(--acai-warning, var(--q-warning));
+  }
+  &--erro {
+    color: var(--acai-negative);
+  }
+  &--neutro {
+    color: var(--acai-text-muted);
+  }
+}
+
+// ===================== Executar =====================
+// Painel destacado: é a única parte da tela que MUDA o mundo lá fora, então não
+// pode parecer só mais um bloco de texto.
+.swagger-executar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--acai-border);
+  border-radius: 6px;
+  background: var(--acai-surface);
+
+  &__acoes {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  // `center`, não `baseline`: a badge do método tem padding vertical, então
+  // alinhar pela linha de base do texto empurrava ela pra cima e o conjunto
+  // lia como desalinhado. Centrado, a badge fica na altura da palavra.
+  &__url {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+  }
+
+  &__endereco {
+    font-family: $swagger-mono;
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+    // `anywhere` em vez de `break-all`: só quebra quando não cabe, e não no
+    // meio de um segmento que ainda caberia na linha seguinte.
+    overflow-wrap: anywhere;
+  }
+}
+
+.swagger-resultado {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--acai-border-subtle);
+
+  &__linha {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  &__meta {
+    font-size: 0.75rem;
+    color: var(--acai-text-muted);
+  }
+
+  &__copiar {
+    margin-left: auto;
+  }
+}
+
+// ===================== Schema =====================
+.swagger-schema {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  // Aninhado ganha recuo e um fio de guia, que é o que deixa a hierarquia legível.
+  .swagger-schema {
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 1px solid var(--acai-border-subtle);
+  }
+
+  &__campo {
+    padding: 2px 0;
+  }
+
+  &__linha {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__nome {
+    font-family: $swagger-mono;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--acai-text);
+  }
+
+  &__tipo {
+    font-family: $swagger-mono;
+    font-size: 0.6875rem;
+    color: var(--acai-text-muted);
+  }
+
+  &__marca {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: var(--acai-surface-hover);
+    color: var(--acai-text-muted);
+
+    &--req {
+      color: var(--acai-negative);
+      border: 1px solid currentColor;
+      background: none;
+    }
+  }
+
+  &__descricao,
+  &__resumo {
+    margin: 0;
+    font-size: 0.6875rem;
+    color: var(--acai-text-muted);
+  }
+}