acai-ui 1.65.5

package/src/components/chart/chart-rotulos.ts

@@ -0,0 +1,75 @@
+// Quebra e truncamento de rótulo de eixo.
+//
+// Diferença importante em relação ao que uma lib de canvas faz: aqui o retorno é
+// um ARRAY de linhas, não uma string com `\n`. Em SVG cada linha vira um
+// `<tspan dy>` — não existe quebra automática dentro de `<text>`.
+//
+// O problema é real e vem do domínio: nome de município ("Santa Bárbara do
+// Pará") e nome de órgão não cabem embaixo de uma barra, e o default de tudo
+// que é lib é sobrepor os rótulos até virar borrão.
+
+/** Marca de corte. Caractere único pra não roubar espaço de 3 letras. */
+const RETICENCIAS = '…'
+
+/** Corta no limite, com reticências, sem cortar no meio quando dá pra evitar. */
+export function truncarRotulo(texto: string, maxPorLinha: number): string {
+  const limpo = String(texto ?? '')
+  if (maxPorLinha <= 0) return ''
+  if (limpo.length <= maxPorLinha) return limpo
+  return `${limpo.slice(0, Math.max(0, maxPorLinha - 1)).trimEnd()}${RETICENCIAS}`
+}
+
+/** Fatia uma palavra que sozinha já não cabe na linha (URL, código, matrícula). */
+function fatiarPalavra(palavra: string, maxPorLinha: number): string[] {
+  const pedacos: string[] = []
+  for (let i = 0; i < palavra.length; i += maxPorLinha) {
+    pedacos.push(palavra.slice(i, i + maxPorLinha))
+  }
+  return pedacos
+}
+
+/**
+ * Quebra por palavra, respeitando um teto de linhas.
+ *
+ * Estourando `maxLinhas`, a ÚLTIMA linha recebe reticências — o leitor precisa
+ * saber que foi cortado. Silenciosamente truncar é pior que não caber.
+ */
+export function quebrarRotulo(texto: string, maxPorLinha = 16, maxLinhas = 2): string[] {
+  const limpo = String(texto ?? '').trim()
+  if (!limpo) return []
+  if (maxPorLinha <= 0 || maxLinhas <= 0) return []
+  if (limpo.length <= maxPorLinha) return [limpo]
+
+  const palavras = limpo.split(/\s+/)
+  const linhas: string[] = []
+  let atual = ''
+
+  for (const palavra of palavras) {
+    if (palavra.length > maxPorLinha) {
+      if (atual) {
+        linhas.push(atual)
+        atual = ''
+      }
+      const pedacos = fatiarPalavra(palavra, maxPorLinha)
+      linhas.push(...pedacos.slice(0, -1))
+      atual = pedacos[pedacos.length - 1] ?? ''
+      continue
+    }
+
+    const tentativa = atual ? `${atual} ${palavra}` : palavra
+    if (tentativa.length <= maxPorLinha) {
+      atual = tentativa
+    } else {
+      if (atual) linhas.push(atual)
+      atual = palavra
+    }
+  }
+  if (atual) linhas.push(atual)
+
+  if (linhas.length <= maxLinhas) return linhas
+
+  const cortadas = linhas.slice(0, maxLinhas)
+  const ultima = cortadas[maxLinhas - 1] as string
+  cortadas[maxLinhas - 1] = truncarRotulo(`${ultima}${RETICENCIAS}`, maxPorLinha)
+  return cortadas
+}

package/src/components/chart/chart-tabela.vue

@@ -0,0 +1,116 @@
+<template>
+  <!--
+    Tabela equivalente ao gráfico — o caminho pelo qual quem usa leitor de tela
+    obtém o NÚMERO EXATO, que nenhum resumo dá (eMAG 3.6).
+
+    Fica sempre no DOM. Quando "escondida", some por clip — NUNCA `display:none`
+    nem `visibility:hidden`, que a esconderiam do leitor de tela também e
+    devolveriam o gráfico à condição de imagem muda.
+  -->
+  <!--
+    🔴 O visually-hidden vai no WRAPPER, nunca na <table>.
+
+    Duas razões, e as duas já custaram bug:
+
+    1. LAYOUT. Em `table-layout: auto` o `width`/`height` de uma tabela valem
+       como MÍNIMO, não como restrição — a tabela cresce pra caber o conteúdo.
+       O `width: 1px` era ignorado e a tabela "escondida" media 283 × 250px de
+       verdade, ocupando layout. O `clip-path` deixava tudo invisível, então o
+       sintoma aparecia longe da causa: no `est-web` virou 249px de barra de
+       rolagem num painel de splitter com `overflow: auto`, e ninguém tinha como
+       ligar uma coisa à outra olhando a tela.
+
+    2. ACESSIBILIDADE. A correção óbvia — `display: block` na tabela — conserta o
+       layout e QUEBRA o motivo de este componente existir: com `display`
+       diferente de `table`, Chrome e Safari descartam o papel implícito de
+       tabela na árvore de acessibilidade. O leitor de tela deixaria de anunciar
+       "Março, Observado, 1.204" célula a célula e leria um bolo de texto.
+
+    O `<div>` já é bloco: nele o `width: 1px` vale de verdade, e a tabela lá
+    dentro mantém `display: table` e a semântica intacta.
+  -->
+  <div :class="{ 'acai-chart-tabela--oculta': !visivel }">
+    <table class="acai-chart-tabela">
+      <caption>{{ legenda }}</caption>
+      <thead>
+        <tr>
+          <th v-for="(coluna, i) in tabela.cabecalho" :key="i" scope="col">{{ coluna }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(linha, i) in tabela.linhas" :key="i">
+          <!-- A 1ª célula é cabeçalho de LINHA: é o que faz o leitor anunciar
+               "Março, Observado, 1.204" ao navegar célula a célula. -->
+          <th scope="row">{{ linha[0] }}</th>
+          <td v-for="(celula, c) in linha.slice(1)" :key="c">{{ celula }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TabelaDados } from './chart-a11y'
+
+withDefaults(
+  defineProps<{
+    tabela: TabelaDados
+    legenda: string
+    visivel?: boolean
+  }>(),
+  { visivel: false },
+)
+</script>
+
+<style lang="scss" scoped>
+.acai-chart-tabela {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+  font-size: 0.8125rem;
+  color: var(--acai-chart-ink);
+
+  caption {
+    text-align: left;
+    padding-bottom: 6px;
+    color: var(--acai-chart-ink-muted);
+    font-size: 0.75rem;
+  }
+
+  th,
+  td {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--acai-chart-grid);
+    text-align: right;
+  }
+
+  thead th,
+  tbody th {
+    text-align: left;
+    font-weight: 600;
+  }
+
+  thead th {
+    border-bottom: 1px solid var(--acai-chart-axis);
+  }
+
+  // Clip: sai da tela mas CONTINUA na árvore de acessibilidade.
+  //
+  // ⚠️ Esta classe vai no `<div>` que embrulha a tabela, NUNCA na `<table>` —
+  // ver o comentário no topo do template. Numa tabela o `width: 1px` abaixo é
+  // lido como mínimo e não encolhe nada; e "consertar" isso com `display: block`
+  // apagaria o papel de tabela na árvore de acessibilidade, que é justamente o
+  // que este componente entrega.
+  &--oculta {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+</style>

package/src/components/chart/chart-ticks.ts

@@ -0,0 +1,116 @@
+// Ticks "bonitos" — algoritmo de nice numbers (Heckbert, Graphics Gems).
+//
+// É o helper que separa um gráfico decente de um caseiro. Dividir o domínio em
+// N partes iguais dá eixo com 0, 3.33, 6.67, 10 — ninguém lê isso. O que a gente
+// quer são passos de 1, 2, 5 ou 10 × 10^k, e o domínio ESTICADO até cair num
+// múltiplo do passo (senão a última barra encosta no topo da área de plotagem).
+//
+// Livre de DOM de propósito: é tudo aritmética, e assim dá pra testar as bordas
+// que quebram na vida real (domínio atravessando zero, min == max, valor vindo
+// como NaN do backend) sem montar componente nenhum.
+
+/** Domínio de fallback quando a entrada não tem informação utilizável. */
+const DOMINIO_VAZIO = { min: 0, max: 1, ticks: [0, 0.25, 0.5, 0.75, 1] } as const
+
+/**
+ * Arredonda um número para o "bonito" mais próximo: 1, 2, 5 ou 10 × 10^k.
+ *
+ * @param paraCima quando `true` sobe para o próximo bonito (usado no tamanho do
+ *   passo); quando `false` pega o menor bonito ≥ x (usado na amplitude).
+ */
+export function passoBonito(bruto: number, paraCima = false): number {
+  if (!Number.isFinite(bruto) || bruto <= 0) return 1
+
+  const expoente = Math.floor(Math.log10(bruto))
+  const fracao = bruto / Math.pow(10, expoente)
+
+  let bonita: number
+  if (paraCima) {
+    if (fracao < 1.5) bonita = 1
+    else if (fracao < 3) bonita = 2
+    else if (fracao < 7) bonita = 5
+    else bonita = 10
+  } else {
+    if (fracao <= 1) bonita = 1
+    else if (fracao <= 2) bonita = 2
+    else if (fracao <= 5) bonita = 5
+    else bonita = 10
+  }
+
+  return bonita * Math.pow(10, expoente)
+}
+
+/**
+ * Casas decimais necessárias para os ticks não renderizarem rótulos repetidos.
+ * Deriva do PASSO, não dos valores: com passo 0,25 precisamos de 2 casas mesmo
+ * que o primeiro tick seja inteiro.
+ */
+export function casasDosTicks(ticks: readonly number[]): number {
+  if (ticks.length < 2) return 0
+  const passo = Math.abs((ticks[1] as number) - (ticks[0] as number))
+  if (!Number.isFinite(passo) || passo <= 0) return 0
+  return Math.max(0, Math.min(10, -Math.floor(Math.log10(passo))))
+}
+
+/**
+ * Domínio esticado até os ticks + os próprios ticks.
+ *
+ * `incluirZero` puxa a base para 0 — default do gráfico de BARRA, porque a área
+ * da barra codifica a grandeza e cortar a base mente sobre a proporção. Em
+ * LINHA o default é `false`: a linha codifica variação, e forçar o zero achata
+ * a série toda numa faixa ilegível.
+ */
+export function dominioBonito(
+  min: number,
+  max: number,
+  opcoes: { alvo?: number; incluirZero?: boolean } = {},
+): { min: number; max: number; ticks: number[] } {
+  const alvo = Math.max(2, Math.floor(opcoes.alvo ?? 5))
+
+  // Backend manda `null`/string vazia virando NaN mais vezes do que se admite.
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    return { ...DOMINIO_VAZIO, ticks: [...DOMINIO_VAZIO.ticks] }
+  }
+
+  let baixo = Math.min(min, max)
+  let alto = Math.max(min, max)
+
+  if (opcoes.incluirZero) {
+    baixo = Math.min(baixo, 0)
+    alto = Math.max(alto, 0)
+  }
+
+  // Série constante (todos os valores iguais). Sem tratar, a amplitude é 0 e o
+  // passo vira 0 → laço infinito. Abre uma janela em volta do valor.
+  if (baixo === alto) {
+    if (baixo === 0) return { min: 0, max: 1, ticks: [0, 0.25, 0.5, 0.75, 1] }
+    const folga = Math.abs(baixo) * 0.5
+    baixo -= folga
+    alto += folga
+  }
+
+  const amplitude = passoBonito(alto - baixo, false)
+  const passo = passoBonito(amplitude / (alvo - 1), true)
+
+  const inicio = Math.floor(baixo / passo) * passo
+  const fim = Math.ceil(alto / passo) * passo
+
+  // Multiplicar o índice em vez de acumular: somar `passo` repetidamente
+  // propaga erro de ponto flutuante e produz 0.30000000000000004 no rótulo.
+  const casas = Math.max(0, Math.min(10, -Math.floor(Math.log10(passo)))) + 1
+  const quantidade = Math.round((fim - inicio) / passo)
+  const ticks: number[] = []
+  for (let i = 0; i <= quantidade; i++) {
+    ticks.push(Number((inicio + i * passo).toFixed(casas)))
+  }
+
+  return { min: inicio, max: fim, ticks }
+}
+
+/**
+ * Só os ticks, quando o chamador não precisa do domínio esticado.
+ * `alvo` é sugestão: o algoritmo devolve a quantidade que couber num passo bonito.
+ */
+export function ticksBonitos(min: number, max: number, alvo = 5): number[] {
+  return dominioBonito(min, max, { alvo }).ticks
+}

package/src/components/checkbox/acai-ui-checkbox-interface.ts

@@ -0,0 +1,17 @@
+export type CheckboxColor = 'primary' | 'negative' | 'positive'
+
+export type CheckboxSize = 'sm' | 'md' | 'lg'
+
+export interface CheckboxProps {
+  modelValue: boolean
+  label?: string
+  color?: CheckboxColor
+  size?: CheckboxSize
+  disable?: boolean
+  /** Caixa compacta (menor), para tabelas e listas densas. */
+  dense?: boolean
+  /** Estado parcial (traço). Útil no "selecionar todos" quando só alguns itens estão marcados. */
+  indeterminate?: boolean
+  /** Marca o campo como obrigatório (eMAG 6.4). Aplica `aria-required="true"`. */
+  required?: boolean
+}

package/src/components/checkbox/acai-ui-checkbox.vue

@@ -0,0 +1,114 @@
+<template>
+  <q-checkbox
+    :model-value="qModel"
+    :label="label"
+    :size="qSize"
+    :dense="dense"
+    :disable="disable"
+    :toggle-indeterminate="false"
+    :class="classes"
+    :style="cssVars"
+    :aria-required="props.required ? 'true' : undefined"
+    @update:model-value="onUpdate"
+  >
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+  </q-checkbox>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import type { CheckboxProps } from './acai-ui-checkbox-interface'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  color: 'primary',
+  size: 'md',
+  disable: false,
+  dense: false,
+  indeterminate: false,
+})
+
+const model = defineModel<boolean>()
+
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+
+const sizeMap: Record<string, string> = {
+  sm: '32px',
+  md: '40px',
+  lg: '52px',
+}
+
+const qSize = computed(() => sizeMap[props.size ?? 'md'] ?? '40px')
+
+// `null` aciona o traço "indeterminado" nativo do Quasar (indeterminateValue = null).
+const qModel = computed<boolean | null>(() =>
+  props.indeterminate ? null : (model.value ?? false),
+)
+
+function onUpdate(val: boolean | null): void {
+  // De indeterminado, o Quasar avança para `true` (toggle-indeterminate=false).
+  model.value = val ?? false
+}
+
+// Preenchimento do estado marcado/indeterminado: `primary` usa o token control-on
+// (navy no claro, azul vivo no escuro); as demais cores usam a brand color do Quasar.
+const cssVars = computed(() => ({
+  '--ds-checkbox-on':
+    props.color === 'primary' ? 'var(--acai-control-on, #0e2a50)' : `var(--q-${props.color})`,
+}))
+
+const classes = computed(() => [
+  'ds-checkbox',
+  `ds-checkbox--${props.size}`,
+  { 'ds-checkbox--disabled': props.disable },
+])
+
+watch(model, (val) => {
+  emit('change', val ?? false)
+})
+</script>
+
+<style lang="scss" scoped>
+.ds-checkbox {
+  // Cor da CAIXA (estado desmarcado). O Quasar usa o `currentColor` de
+  // `.q-checkbox__bg` tanto na BORDA (`2px solid currentColor`) quanto no FUNDO do
+  // estado marcado (`background: currentColor`). No escuro o Quasar só clareia isso
+  // sob `.q-checkbox--dark` (depende de `$q.dark.isActive`, que NÃO sincroniza no
+  // consumidor — dark vem do `.body--dark`), então a borda somia. Setamos direto no
+  // `__bg` (além do `__inner`) com !important pra: (1) virar sozinho no `.body--dark`
+  // via token; (2) ser IMUNE a CSS global do consumidor (ex.: `.q-checkbox__bg
+  // { color: navy }`, especificidade 0,1,0), que sequestrava o fill/borda por
+  // `currentColor` — nosso `.ds-checkbox .q-checkbox__bg` (0,3,0) vence.
+  :deep(.q-checkbox__inner),
+  :deep(.q-checkbox__bg) {
+    color: var(--acai-text-muted, #{$color-gray-600}) !important;
+  }
+
+  // Estado marcado / indeterminado: preenchimento + traço (o check SVG é branco).
+  // Setamos no `__bg` também (0,4,0) pra o fundo (`background: currentColor`) usar o
+  // token, imune a `.q-checkbox__bg { color }` global do app.
+  :deep(.q-checkbox__inner--truthy),
+  :deep(.q-checkbox__inner--indet),
+  :deep(.q-checkbox__inner--truthy .q-checkbox__bg),
+  :deep(.q-checkbox__inner--indet .q-checkbox__bg) {
+    color: var(--ds-checkbox-on, var(--acai-control-on, #{$primary})) !important;
+  }
+
+  :deep(.q-checkbox__label) {
+    color: var(--acai-text, #{$color-gray-700});
+    font-weight: 500;
+  }
+
+  &--sm :deep(.q-checkbox__label) { font-size: 0.75rem; }
+  &--md :deep(.q-checkbox__label) { font-size: 0.875rem; }
+  &--lg :deep(.q-checkbox__label) { font-size: 1rem; }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>

package/src/components/chip/acai-ui-chip-interface.ts

@@ -0,0 +1,19 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+export type ChipColor = 'primary' | 'negative' | 'positive' | 'warning' | 'info' | 'accent' | 'dark' | 'grey'
+
+export type ChipSize = 'sm' | 'md' | 'lg'
+
+export interface ChipProps {
+  label: string
+  color?: ChipColor
+  textColor?: string
+  size?: ChipSize
+  icon?: MaterialIconValues
+  iconRight?: MaterialIconValues
+  removable?: boolean
+  outline?: boolean
+  dense?: boolean
+  disable?: boolean
+  clickable?: boolean
+}

package/src/components/chip/acai-ui-chip.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-chip
+    :label="label"
+    :color="color"
+    :text-color="textColor || 'white'"
+    :size="qSize"
+    :icon="icon"
+    :icon-right="iconRight"
+    :removable="removable"
+    :outline="outline"
+    :dense="dense"
+    :disable="disable"
+    :clickable="clickable"
+    class="ds-chip"
+    @click="onClick"
+    @remove="onRemove"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChipProps } from './acai-ui-chip-interface'
+
+const props = withDefaults(defineProps<ChipProps>(), {
+  color: 'primary',
+  size: 'md',
+  removable: false,
+  outline: false,
+  dense: false,
+  disable: false,
+  clickable: false,
+})
+
+const emit = defineEmits<{
+  click: [event: Event]
+  remove: []
+}>()
+
+const sizeMap: Record<string, string> = {
+  sm: '0.7rem',
+  md: '1rem',
+  lg: '1.3rem',
+}
+
+const qSize = computed(() => sizeMap[props.size ?? 'md'] ?? '1rem')
+
+function onClick(event: Event): void {
+  if (props.clickable) emit('click', event)
+}
+
+function onRemove(): void {
+  emit('remove')
+}
+</script>
+
+<style lang="scss" scoped>
+.ds-chip {
+  font-weight: 600;
+  border-radius: $radius-2xl;
+}
+</style>

package/src/components/code/acai-ui-code-interface.ts

@@ -0,0 +1,43 @@
+export interface CodeProps {
+  /**
+   * Conteúdo exibido no modo leitura. Objeto/array vira JSON indentado; string
+   * é mostrada como veio (útil pra resposta crua de API, que nem sempre é JSON
+   * válido). Ignorado quando há `v-model` — aí quem manda é o `modelValue`.
+   */
+  value?: unknown
+  /**
+   * Linguagem do realce. Hoje só `json` tem realce; qualquer outro valor
+   * mostra o texto escapado, sem cor. @default 'json'
+   */
+  language?: 'json' | 'text'
+  /** Rótulo curto no topo do bloco (ex.: `Exemplo`, `Resposta`). */
+  titulo?: string
+  /** Mostra o botão de copiar. @default true */
+  copiavel?: boolean
+  /** Sem borda e sem fundo — para blocos já dentro de um contêiner com moldura. */
+  flat?: boolean
+  /** Altura máxima antes de rolar (ex.: `320px`). Sem valor, cresce livre. */
+  maxHeight?: string
+  /**
+   * Liga o modo EDITOR: com `v-model` o bloco vira editável, mantendo o realce
+   * de sintaxe. Sem ele, o componente é só visualização (`value`).
+   */
+  modelValue?: string
+  /** Rótulo acessível do editor (eMAG 6.2). Só usado no modo editor. */
+  ariaLabel?: string
+  /**
+   * Habilita a busca interna (Ctrl+F com o foco no bloco, ou o botão de lupa).
+   * O atalho é escopado ao componente — fora dele o Ctrl+F do navegador segue
+   * normal. Vale nos dois modos: no editor o Ctrl+F do navegador não enxerga o
+   * texto, que vive dentro de um `<textarea>`. @default true
+   */
+  buscavel?: boolean
+  /** Calha com o número de cada linha, à esquerda do código. @default true */
+  numeros?: boolean
+  /**
+   * Seta pra fechar o bloco de um `{` ou `[` que abre e fecha em linhas
+   * diferentes. Só no modo leitura: no editor o texto real está no `<textarea>`
+   * de cima, e esconder linha só do realce descolaria os dois. @default true
+   */
+  dobravel?: boolean
+}