acai-ui 1.65.5

package/src/components/error-log/acai-ui-error-log-json-tree.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="log-container">
+    <transition name="log-filter-fade">
+      <div
+        v-if="filtroVisivel"
+        class="log-filter"
+        :class="{
+          'log-filter--sem-resultado': termoBusca && totalMatches === 0,
+        }"
+      >
+        <acai-ui-icon name="search" color="grey-5" size="14px" />
+        <input
+          ref="filtroInputRef"
+          v-model="termoBusca"
+          class="log-filter__input"
+          placeholder="Filtrar por key ou valor..."
+          @keydown.esc="fecharFiltro"
+          @keydown.enter.exact.prevent="irParaProximo"
+          @keydown.shift.enter.prevent="irParaAnterior"
+        />
+        <span v-if="termoBusca" class="log-filter__info">
+          {{
+            totalMatches > 0
+              ? `${matchAtual + 1} de ${totalMatches}`
+              : "Sem resultados"
+          }}
+        </span>
+        <div v-if="totalMatches > 1" class="log-filter__nav">
+          <acai-ui-icon
+            name="keyboard_arrow_up"
+            color="grey-5"
+            size="18px"
+            class="cursor-pointer"
+            @click="irParaAnterior"
+          />
+          <acai-ui-icon
+            name="keyboard_arrow_down"
+            color="grey-5"
+            size="18px"
+            class="cursor-pointer"
+            @click="irParaProximo"
+          />
+        </div>
+        <acai-ui-icon
+          name="close"
+          color="grey-5"
+          size="14px"
+          class="cursor-pointer"
+          @click="fecharFiltro"
+        />
+      </div>
+    </transition>
+
+    <q-tree
+      v-model:expanded="expandidos"
+      :nodes="nos"
+      node-key="id"
+      dense
+      class="log-tree"
+    >
+      <template #default-header="slotProps">
+        <div class="log-node" :data-node-id="slotProps.node.id">
+          <span
+            class="log-key"
+            v-html="destacarTexto(slotProps.node.key, slotProps.node.id, 'key')"
+          />
+          <span class="log-sep">:</span>
+          <span
+            class="log-value"
+            :class="`log-value--${slotProps.node.valueType}`"
+            v-html="
+              destacarTexto(
+                slotProps.node.display,
+                slotProps.node.id,
+                'display',
+              )
+            "
+          />
+
+          <q-menu touch-position context-menu>
+            <q-list dense class="log-ctx">
+              <q-item
+                clickable
+                v-close-popup
+                @click="copiarObjeto(slotProps.node.rawValue)"
+              >
+                <q-item-section side
+                  ><acai-ui-icon name="data_object" size="xs" color="grey-5"
+                /></q-item-section>
+                <q-item-section>Copiar objeto</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                @click="copiarTexto(slotProps.node.display)"
+              >
+                <q-item-section side
+                  ><acai-ui-icon name="text_fields" size="xs" color="grey-5"
+                /></q-item-section>
+                <q-item-section>Copiar valor</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </div>
+      </template>
+    </q-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { copyToClipboard } from "quasar";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+import { notificacao } from "../../hooks/notify";
+
+// ANALISAR A IMPORTANCIA
+// type JsonValue =
+//   | string
+//   | number
+//   | boolean
+//   | null
+//   | undefined
+//   | JsonValue[]
+//   | { [key: string]: JsonValue }
+//   | Record<string, unknown>;
+
+type JsonNode = {
+  id: string;
+  key: string;
+  display: string;
+  valueType: string;
+  rawValue: unknown;
+  children?: JsonNode[];
+};
+
+type Match = { nodeId: string; field: "key" | "display" };
+
+const props = defineProps<{ value: unknown }>();
+
+const expandidos = ref<string[]>([]);
+
+const ehObjetoPlano = (valor: unknown): valor is Record<string, unknown> =>
+  typeof valor === "object" &&
+  valor !== null &&
+  !Array.isArray(valor) &&
+  !(valor instanceof Date);
+
+const formatarPrimitivo = (valor: unknown): string => {
+  if (typeof valor === "string") return JSON.stringify(valor);
+  if (typeof valor === "number" || typeof valor === "boolean")
+    return String(valor);
+  if (valor === null) return "null";
+  if (valor === undefined) return "undefined";
+  if (valor instanceof Date) return valor.toISOString();
+  return String(valor);
+};
+
+const truncar = (texto: string, limite = 80): string =>
+  texto.length <= limite ? texto : `${texto.slice(0, limite - 3)}...`;
+
+const extrairResumo = (key: string, valor: unknown): string | null => {
+  if (key === "message" && typeof valor === "string") return truncar(valor);
+  if (key === "name" && typeof valor === "string") return truncar(valor);
+  if (key === "config" && ehObjetoPlano(valor)) {
+    const method = String(valor.method ?? "").toUpperCase();
+    const url = String(valor.url ?? "");
+    const baseURL = String(valor.baseURL ?? "");
+    const destino = baseURL && url ? `${baseURL}${url}` : url || baseURL;
+    return [method, destino].filter(Boolean).join(" ") || "Object";
+  }
+  if (key === "response" && ehObjetoPlano(valor)) {
+    const status = valor.status ?? "";
+    const data = ehObjetoPlano(valor.data) ? valor.data : null;
+    const message =
+      data && typeof data.message === "string" ? truncar(data.message) : "";
+    const tipo = data && typeof data.tipo === "string" ? data.tipo : "";
+    return (
+      [status ? `status ${status}` : "", message, tipo]
+        .filter(Boolean)
+        .join(" | ") || "Object"
+    );
+  }
+  if (key === "data" && ehObjetoPlano(valor)) {
+    const message =
+      typeof valor.message === "string" ? truncar(valor.message) : "";
+    const tipo = typeof valor.tipo === "string" ? valor.tipo : "";
+    return [message, tipo].filter(Boolean).join(" | ") || "Object";
+  }
+  return null;
+};
+
+const formatarResumo = (
+  key: string,
+  valor: unknown,
+): { display: string; valueType: string } => {
+  const resumoCustom = extrairResumo(key, valor);
+  if (resumoCustom) return { display: resumoCustom, valueType: typeof valor };
+  if (Array.isArray(valor))
+    return { display: `Array(${valor.length})`, valueType: "array" };
+  if (ehObjetoPlano(valor))
+    return {
+      display: `Object(${Object.keys(valor).length})`,
+      valueType: "object",
+    };
+  if (valor === null) return { display: "null", valueType: "null" };
+  if (valor === undefined)
+    return { display: "undefined", valueType: "undefined" };
+  return { display: formatarPrimitivo(valor), valueType: typeof valor };
+};
+
+const montarNo = (key: string, valor: unknown, caminho: string): JsonNode => {
+  if (Array.isArray(valor)) {
+    const children = valor.map((item, index) =>
+      montarNo(`[${index}]`, item, `${caminho}[${index}]`),
+    );
+    const resumo = formatarResumo(key, valor);
+    return {
+      id: caminho,
+      key: key,
+      display: resumo.display,
+      valueType: resumo.valueType,
+      rawValue: valor,
+      children,
+    };
+  }
+  if (ehObjetoPlano(valor)) {
+    const children = Object.entries(valor).map(([k, v]) =>
+      montarNo(k, v, `${caminho}.${k}`),
+    );
+    const resumo = formatarResumo(key, valor);
+    return {
+      id: caminho,
+      key: key,
+      display: resumo.display,
+      valueType: resumo.valueType,
+      rawValue: valor,
+      children,
+    };
+  }
+  const resumo = formatarResumo(key, valor);
+  return {
+    id: caminho,
+    key: key,
+    display: resumo.display,
+    valueType: resumo.valueType,
+    rawValue: valor,
+  };
+};
+
+const nos = computed<JsonNode[]>(() => {
+  const valor = props.value;
+  if (ehObjetoPlano(valor))
+    return Object.entries(valor).map(([k, v]) => montarNo(k, v, k));
+  if (Array.isArray(valor))
+    return valor.map((item, i) => montarNo(`[${i}]`, item, `[${i}]`));
+  return [montarNo("valor", valor, "valor")];
+});
+
+const montarExpansaoAutomatica = (valor: unknown): string[] => {
+  if (!ehObjetoPlano(valor)) return [];
+  const responseData = ehObjetoPlano(valor.response)
+    ? valor.response.data
+    : undefined;
+  const chavesExpandidas: string[] = ["response"];
+  if (ehObjetoPlano(responseData)) {
+    chavesExpandidas.push("response.data");
+    if (Array.isArray(responseData.campos))
+      chavesExpandidas.push("response.data.campos");
+    if (responseData.informacao)
+      chavesExpandidas.push("response.data.informacao");
+  }
+  return chavesExpandidas;
+};
+
+watch(
+  () => props.value,
+  (valor) => {
+    expandidos.value = montarExpansaoAutomatica(valor);
+  },
+  { immediate: true },
+);
+
+// --- Filtro ---
+const filtroVisivel = ref(false);
+const termoBusca = ref("");
+const matchAtual = ref(0);
+const filtroInputRef = ref<HTMLInputElement | null>(null);
+
+const coletarMatches = (lista: JsonNode[], termo: string): Match[] => {
+  const resultado: Match[] = [];
+  const baixo = termo.toLowerCase();
+  const varrer = (nodes: JsonNode[]) => {
+    for (const no of nodes) {
+      if (no.key.toLowerCase().includes(baixo))
+        resultado.push({ nodeId: no.id, field: "key" });
+      if (no.display.toLowerCase().includes(baixo))
+        resultado.push({ nodeId: no.id, field: "display" });
+      if (no.children) varrer(no.children);
+    }
+  };
+  varrer(lista);
+  return resultado;
+};
+
+const todasMatches = computed<Match[]>(() => {
+  if (!termoBusca.value) return [];
+  return coletarMatches(nos.value, termoBusca.value);
+});
+const totalMatches = computed(() => todasMatches.value.length);
+
+const obterIdsAncestral = (id: string): string[] => {
+  const ancestrais: string[] = [];
+  let atual = id;
+  while (true) {
+    const pos = Math.max(atual.lastIndexOf("."), atual.lastIndexOf("["));
+    if (pos <= 0) break;
+    atual = atual.slice(0, pos);
+    ancestrais.push(atual);
+  }
+  return ancestrais;
+};
+
+async function scrollParaMatch(index: number) {
+  const match = todasMatches.value[index];
+  if (!match) return;
+  const ancestrais = obterIdsAncestral(match.nodeId);
+  expandidos.value = [...new Set([...expandidos.value, ...ancestrais])];
+  await nextTick();
+  const el = document.querySelector(
+    `[data-node-id="${CSS.escape(match.nodeId)}"]`,
+  );
+  el?.scrollIntoView({ block: "center", behavior: "smooth" });
+}
+
+watch(termoBusca, async (novo) => {
+  matchAtual.value = 0;
+  if (novo) {
+    const idsParaExpandir = new Set<string>();
+    for (const match of todasMatches.value) {
+      for (const id of obterIdsAncestral(match.nodeId)) idsParaExpandir.add(id);
+    }
+    expandidos.value = [...new Set([...expandidos.value, ...idsParaExpandir])];
+    await nextTick();
+    await nextTick();
+    await scrollParaMatch(0);
+  } else {
+    expandidos.value = montarExpansaoAutomatica(props.value);
+  }
+});
+
+async function irParaProximo() {
+  if (totalMatches.value === 0) return;
+  matchAtual.value = (matchAtual.value + 1) % totalMatches.value;
+  await scrollParaMatch(matchAtual.value);
+}
+
+async function irParaAnterior() {
+  if (totalMatches.value === 0) return;
+  matchAtual.value =
+    (matchAtual.value - 1 + totalMatches.value) % totalMatches.value;
+  await scrollParaMatch(matchAtual.value);
+}
+
+function escapeHtml(texto: string): string {
+  return texto
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escapeRegex(texto: string): string {
+  return texto.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function destacarTexto(
+  texto: string,
+  nodeId: string,
+  campo: "key" | "display",
+): string {
+  const escapado = escapeHtml(texto);
+  if (!termoBusca.value) return escapado;
+  const matchAtualObj = todasMatches.value[matchAtual.value];
+  const esteEhAtual =
+    matchAtualObj?.nodeId === nodeId && matchAtualObj?.field === campo;
+  const termo = escapeRegex(escapeHtml(termoBusca.value));
+  return escapado.replace(
+    new RegExp(`(${termo})`, "gi"),
+    (match) =>
+      `<mark class="log-highlight${esteEhAtual ? " log-highlight--ativo" : ""}">${match}</mark>`,
+  );
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.ctrlKey && e.key === "f") {
+    e.preventDefault();
+    abrirFiltro();
+  }
+  if (e.key === "Escape" && filtroVisivel.value) fecharFiltro();
+}
+
+onMounted(() => document.addEventListener("keydown", handleKeydown));
+onUnmounted(() => document.removeEventListener("keydown", handleKeydown));
+
+function abrirFiltro() {
+  filtroVisivel.value = true;
+  nextTick(() => filtroInputRef.value?.focus());
+}
+
+function fecharFiltro() {
+  filtroVisivel.value = false;
+  termoBusca.value = "";
+}
+
+async function copiarObjeto(valor: unknown) {
+  await copyToClipboard(JSON.stringify(valor, null, 2));
+  notificacao({ color: "positive", message: "Objeto copiado." });
+}
+
+async function copiarTexto(display: string) {
+  await copyToClipboard(display.replace(/^"|"$/g, ""));
+  notificacao({ color: "positive", message: "Valor copiado." });
+}
+</script>
+
+<style src="./acai-ui-error-log-styles.scss" lang="scss" />

package/src/components/error-log/acai-ui-error-log-redigir.ts

@@ -0,0 +1,74 @@
+/**
+ * Redação de credenciais no payload dos "Detalhes técnicos" do error-log.
+ *
+ * O bloco despeja `config.data` (o corpo da requisição) e `response.headers` —
+ * num POST de login que falha, isso significaria a SENHA em texto puro na tela.
+ * A trava antiga era `import.meta.env.DEV`, impossível de ligar em produção;
+ * com a prop `ehDesenvolvimento` ela virou flag de RUNTIME, então a proteção
+ * não pode mais depender de quem configura o ambiente.
+ *
+ * Oculta SEMPRE, inclusive em desenvolvimento: quem precisa do valor real tem
+ * a aba Network do navegador.
+ */
+
+/** Chaves cujo valor nunca aparece nos detalhes técnicos. */
+export const CAMPOS_SENSIVEIS: readonly string[] = [
+  'authorization',
+  'senha',
+  'novasenha',
+  'confirmarsenha',
+  'password',
+  'token',
+  'accesstoken',
+  'refreshtoken',
+  'idtoken',
+  'cookie',
+  'setcookie',
+  'secret',
+  'clientsecret',
+  'apikey',
+  'chaveacesso',
+  'credentials',
+]
+
+/** Marcador visível de propósito — não pode parecer que o campo não veio. */
+export const OCULTO = '[oculto]'
+
+/**
+ * Normaliza para comparar sem caixa nem separador: `access_token`,
+ * `access-token` e `accessToken` caem todos em `accesstoken`.
+ */
+const normalizar = (chave: string): string => chave.toLowerCase().replace(/[-_\s]/g, '')
+
+const PROFUNDIDADE_MAX = 8
+
+/**
+ * Devolve uma cópia do valor com as chaves sensíveis trocadas por `[oculto]`.
+ * Não muta a entrada. O limite de profundidade também protege contra
+ * referência circular (o `config` do axios costuma ter uma).
+ *
+ * @param extras chaves adicionais do consumidor (mesma normalização)
+ * @example
+ * redigirSensiveis({ usuario: 'ana', senha: '123' })
+ * // { usuario: 'ana', senha: '[oculto]' }
+ */
+export function redigirSensiveis(
+  valor: unknown,
+  extras: readonly string[] = [],
+  profundidade = 0,
+): unknown {
+  if (profundidade > PROFUNDIDADE_MAX) return valor
+  if (Array.isArray(valor)) {
+    return valor.map((item) => redigirSensiveis(item, extras, profundidade + 1))
+  }
+  if (!valor || typeof valor !== 'object') return valor
+
+  const sensiveis = new Set([...CAMPOS_SENSIVEIS, ...extras.map(normalizar)])
+  const saida: Record<string, unknown> = {}
+  for (const [chave, item] of Object.entries(valor as Record<string, unknown>)) {
+    saida[chave] = sensiveis.has(normalizar(chave))
+      ? OCULTO
+      : redigirSensiveis(item, extras, profundidade + 1)
+  }
+  return saida
+}

package/src/components/error-log/acai-ui-error-log-styles.scss

@@ -0,0 +1,137 @@
+.log-tree {
+  color: #c9d1d9;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+
+  .q-tree__node-header {
+    padding: 2px 0;
+  }
+
+  .q-tree__node-header-content {
+    overflow: hidden;
+  }
+
+  .q-tree__arrow {
+    color: #8b949e;
+  }
+}
+
+.log-node {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.log-key {
+  color: #4fc1ff;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.log-sep {
+  color: #8b949e;
+}
+
+.log-value {
+  color: #c9d1d9;
+  font-weight: 600;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.log-value--string   { color: #f1e05a; }
+.log-value--number   { color: #b392f0; }
+.log-value--boolean  { color: #ffab70; }
+// Vermelho FIXO da paleta do bloco (GitHub dark), igual aos irmãos acima: este
+// viewer tem fundo #0d1117 nos DOIS temas, então a cor não pode seguir o tema —
+// no claro, `--acai-negative` é vinho escuro e sumiria sobre o quase-preto.
+.log-value--null     { color: #ff7b72; font-style: italic; }
+.log-value--undefined { color: #8b949e; }
+
+.log-filter {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  // Campo de filtro + contador + setas de navegação. Mesma situação da busca do
+  // acai-ui-code: muita peça de largura fixa numa linha só.
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 5px 10px;
+  margin-bottom: 8px;
+  background: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  transition: border-color 0.15s;
+
+  &--sem-resultado {
+    border-color: #f85149;
+  }
+
+  &__input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #c9d1d9;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.8125rem;
+
+    &::placeholder { color: #484f58; }
+  }
+
+  &__info {
+    font-size: 0.6875rem;
+    color: #8b949e;
+    white-space: nowrap;
+  }
+
+  &__nav {
+    display: flex;
+    gap: 2px;
+  }
+}
+
+mark.log-highlight {
+  background: rgba(210, 153, 34, 0.35);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+mark.log-highlight--ativo {
+  background: #d29922;
+  color: #0d1117;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.log-filter-fade-enter-active,
+.log-filter-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.log-filter-fade-enter-from,
+.log-filter-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.log-ctx {
+  background: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  min-width: 160px;
+  padding: 4px;
+
+  .q-item {
+    color: #c9d1d9;
+    font-size: 0.8125rem;
+    min-height: 30px;
+    border-radius: 4px;
+
+    &:hover { background: #21262d; }
+  }
+}