acai-ui 1.65.5

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

@@ -0,0 +1,60 @@
+export type ColumnShortcut =
+  | 'cpfCnpj'
+  | 'cep'
+  | 'placa'
+  | 'date'
+  | 'phone'
+  | 'amount'
+  | 'badge'
+  | 'justification'
+  | 'progress'
+
+export type ExtraColumnName = 'action' | 'dropdown'
+
+export type BadgeUI = { color: string; label: string; outline?: boolean }
+
+export type TableField<Row extends object> = Extract<keyof Row, string> | ((row: Row) => unknown)
+
+export type ColumnName<Row extends object> =
+  | ColumnShortcut
+  | ExtraColumnName
+  | `${Extract<keyof Row, string>}.${ColumnShortcut}`
+  | Extract<keyof Row, string>
+  | (string & NonNullable<unknown>)
+
+export interface ColumnProps<Row extends object> {
+  name: ColumnName<Row>
+  label: string
+  field: TableField<Row>
+  required?: boolean
+  align?: 'left' | 'right' | 'center'
+  sortable?: boolean
+  classes?: string
+  style?: string
+  format?: (value: unknown, row: Row) => string
+}
+
+export interface TableProps<Row extends object> {
+  rows: Row[]
+  columns: ColumnProps<Row>[]
+  modelValue?: number
+  tableClass?: string
+  dense?: boolean
+  totalPages?: number
+  /**
+   * Total de registros, exibido como "Total de elementos" à esquerda do rodapé.
+   *
+   * **Só no desktop e no tablet.** Abaixo de 600px a contagem é escondida e o
+   * rodapé fica só com a paginação, centrada e colada na tabela — em 360px a
+   * linha de texto ocupava uma faixa inteira e afastava o controle da tabela.
+   */
+  totalItems?: number
+  skeleton?: boolean
+  columnCount?: number
+  /** Título da tabela renderizado como `<caption>` (eMAG 3.9). Importante para leitores de tela. */
+  caption?: string
+}
+
+export type TableSlot<Row extends object, Names extends string = ColumnName<Row>> = {
+  [P in Names]: (props: { row: Row; cell: unknown }) => unknown[]
+}

package/src/components/table/acai-ui-table-justificativa.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="celula-justificativa">
+    <span
+      ref="textoRef"
+      class="celula-justificativa__texto"
+      :class="{ 'celula-justificativa__texto--clicavel': truncado }"
+      :role="truncado ? 'button' : undefined"
+      :tabindex="truncado ? 0 : undefined"
+      :aria-haspopup="truncado ? 'dialog' : undefined"
+      @focus="aberto = true"
+      @blur="aberto = false"
+      @keydown.esc="aberto = false"
+      @click.stop="abrirModal"
+      @keydown.enter.prevent="abrirModal"
+      @keydown.space.prevent="abrirModal"
+      >{{ texto }}</span
+    >
+
+    <!-- O balão NUNCA rola: o `q-tooltip` do Quasar sai com `no-pointer-events`, então
+         o mouse o atravessa — barra de rolagem ali dentro é inalcançável, e o balão
+         ainda fecha quando o ponteiro deixa a célula. Ele mostra o que cabe em 8
+         linhas; o texto inteiro (rolável, selecionável, copiável) vive no modal. -->
+    <acai-ui-tooltip
+      v-if="truncado"
+      v-model="aberto"
+      class="tooltip-justificativa"
+      position="bottom"
+      @show="medirBalao"
+    >
+      <p ref="balaoRef" class="tooltip-justificativa__conteudo">{{ texto }}</p>
+
+      <p class="tooltip-justificativa__rodape">
+        <acai-ui-icon name="open_in_new" size="14px" decorative />
+        {{ balaoCortado ? 'Clique para ver o texto completo' : 'Clique para abrir e copiar' }}
+      </p>
+    </acai-ui-tooltip>
+
+    <acai-ui-modal v-model="modalAberto" :title="titulo" hide-actions>
+      <p class="justificativa-modal">{{ texto }}</p>
+
+      <template #footer>
+        <acai-ui-button label="Fechar" outline color="primary" @click="modalAberto = false" />
+      </template>
+    </acai-ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import AcaiUiTooltip from '../tooltip/acai-ui-tooltip.vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import AcaiUiModal from '../modal/acai-ui-modal.vue'
+import AcaiUiButton from '../button/acai-ui-button.vue'
+
+// `titulo` é o label da própria coluna — vira o título do modal.
+const props = defineProps<{ texto: string; titulo: string }>()
+
+const textoRef = ref<HTMLElement | null>(null)
+const balaoRef = ref<HTMLElement | null>(null)
+const truncado = ref(false)
+const balaoCortado = ref(false)
+const aberto = ref(false)
+const modalAberto = ref(false)
+
+// O corte é do CSS (`-webkit-line-clamp`), não do JS: cortar por nº de caracteres
+// não sabe a largura da coluna — era o que estourava a altura da linha quando a
+// coluna era estreita. Aqui só MEDIMOS se sobrou texto escondido, pra decidir se
+// vale mostrar o tooltip.
+function medir(): void {
+  const el = textoRef.value
+  // Sem caixa renderizada (aba inativa, modal fechado, `v-show` desligado) a medida
+  // dá 0 e diria "não truncado" — melhor não responder do que responder errado.
+  if (!el || el.getClientRects().length === 0) return
+  truncado.value = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1
+}
+
+// Só dá pra saber se o balão coube depois que ele existe no DOM — daí medir no `show`.
+function medirBalao(): void {
+  void nextTick(() => {
+    const el = balaoRef.value
+    if (!el) return
+    balaoCortado.value = el.scrollHeight > el.clientHeight + 1
+  })
+}
+
+function abrirModal(): void {
+  if (!truncado.value) return
+  aberto.value = false
+  modalAberto.value = true
+}
+
+let observerTamanho: ResizeObserver | null = null
+let observerVisibilidade: IntersectionObserver | null = null
+
+onMounted(() => {
+  medir()
+  // No frame do mount o texto pode ainda não ter sido diagramado (scrollHeight ==
+  // clientHeight), e aí a medida sai "não truncado" sem ninguém pra corrigir.
+  requestAnimationFrame(medir)
+
+  const el = textoRef.value
+  if (!el) return
+
+  // Largura da coluna muda com o conteúdo e com a viewport.
+  if (typeof ResizeObserver !== 'undefined') {
+    observerTamanho = new ResizeObserver(medir)
+    observerTamanho.observe(el)
+  }
+
+  // Célula montada escondida (aba, expansion, modal) só ganha layout quando aparece,
+  // e aí a CAIXA não muda de tamanho — só o conteúdo passa a caber/não caber. Sem
+  // isto o ResizeObserver nunca dispara e a célula fica sem tooltip pra sempre.
+  if (typeof IntersectionObserver !== 'undefined') {
+    observerVisibilidade = new IntersectionObserver((entradas) => {
+      if (entradas.some((entrada) => entrada.isIntersecting)) medir()
+    })
+    observerVisibilidade.observe(el)
+  }
+})
+
+onBeforeUnmount(() => {
+  observerTamanho?.disconnect()
+  observerTamanho = null
+  observerVisibilidade?.disconnect()
+  observerVisibilidade = null
+})
+
+watch(
+  () => props.texto,
+  () => {
+    aberto.value = false
+    void nextTick(medir)
+  },
+)
+</script>

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

@@ -0,0 +1,293 @@
+// Import explícito (CLAUDE.md §6): consumidores via condition `vue` compilam
+// este source sem o `additionalData` do vite.config da lib.
+@import '../../scss/controls';
+@import '../../scss/breakpoints';
+
+// O Quasar fixa o font-size da tabela em px (não escala com a preferência de
+// tamanho de fonte). Redefine em rem pra célula/cabeçalho acompanharem o sistema.
+.q-table {
+  font-size: 0.8125rem; // 13px
+}
+
+// O Quasar aplica o font-size direto em `.q-table th`/`.q-table td` (px, via
+// $table-*-font-size) — seletor mais específico que `.q-table`, então o px vencia
+// e a tabela NÃO acompanhava a preferência de tamanho de fonte (root font-size %).
+// Reafirma em rem nos MESMOS alvos com especificidade maior (thead/tbody) → escala.
+.q-table thead tr th,
+.q-table tbody tr td {
+  font-size: 0.8125rem; // 13px @ 100% — agora relativo ao root (preferência de fonte)
+}
+
+// Especificidade aumentada (.q-table thead .header-class-tabela) para vencer
+// o seletor default do Quasar `.q-table > thead > tr > th` que sobrescrevia
+// background-color após a refactor da Fase E (slot #header customizado).
+.q-table thead tr th.header-class-tabela,
+.header-class-tabela {
+  color: var(--acai-on-navy, #{$color-gray-100}) !important;
+  background-color: var(--acai-table-header-bg, #{$primary}) !important;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.linha-cor {
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: var(--acai-row-odd, #{$color-gray-400});
+      }
+
+      &:nth-child(even) {
+        background-color: var(--acai-row-even, #{$color-gray-100});
+      }
+    }
+  }
+}
+
+// Texto das células do corpo: só o FUNDO das linhas flipava no dark; o texto
+// herdava o preto nativo do Quasar (config.dark não confiável). --acai-text
+// flipa claro/escuro sozinho — light idêntico via fallback.
+.q-table tbody td {
+  color: var(--acai-text, #{$color-gray-900});
+}
+
+// Rodapé / no-data ("Nenhum resultado encontrado!"): o cinza claro do Quasar
+// destoa no escuro. Superfície + texto dark-aware (claro idêntico via token).
+.q-table__bottom {
+  background: var(--acai-surface, #{$color-white-100});
+  color: var(--acai-text-muted, #{$color-gray-600});
+  border-top-color: var(--acai-border, #{$color-gray-300});
+}
+
+// Tema escuro: o Quasar (body--dark) pinta a moldura/separadores da tabela com
+// branco translúcido (rgba(255,255,255,0.28)) → "linha branca" dura. Troca a
+// moldura por ELEVAÇÃO clara (glow do --acai-elevation) e suaviza os
+// separadores internos pra --acai-border (navy sutil, ainda legível como grade).
+.body--dark {
+  // Moldura do `bordered` fica no CONTAINER (.q-table--bordered, div externo do
+  // QTable): sem borda dura. NÃO leva sombra própria — a tabela vive dentro de um
+  // acai-ui-card, que já dá a elevação; sombra aqui dobraria/vazaria.
+  .q-table--bordered {
+    border-color: transparent !important;
+  }
+
+  // Quasar renderiza a QTable como CARD (classe .q-table__card): `background: #fff`
+  // + sombra Material, e NÃO troca no dark (o `.q-table__card--dark` só entra com a
+  // prop `dark`, que não usamos). Esse fundo branco vaza como MOLDURA clara nas
+  // bordas/cantos do conteúdo escuro. Como a tabela vive dentro do acai-ui-card,
+  // zera bg e sombra — era esse o "contorno branco".
+  .q-table__card {
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  // Separadores internos das células: o Quasar (body--dark) pinta de branco 0.28
+  // (grade dura). Suaviza pra --acai-border (navy sutil) — grade legível sem o
+  // branco agressivo. A MOLDURA externa continua sem borda (acima); só as linhas
+  // internas voltam. (Claro fica intacto: fora do body--dark.)
+  .q-table th,
+  .q-table td {
+    border-color: var(--acai-border) !important;
+  }
+}
+
+.tabela-footer {
+  display: flex;
+  // `center`, e não `start`: a contagem é uma linha de texto de 20px e a
+  // paginação é uma fileira de botões de 30px. Alinhados pelo TOPO, o texto
+  // fica 5px acima do centro dos botões — desencontro visível justamente porque
+  // os dois são a mesma informação, uma de cada ponta da linha.
+  align-items: center;
+  justify-content: space-between;
+  // A contagem e o QPagination não cabem lado a lado num celular — e a
+  // paginação não encolhe, porque cada botão tem `min-width`. Sem wrap um dos
+  // dois é empurrado pra fora. O gap é o piso de respiro que o `space-between`
+  // não dá quando a linha enche.
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  margin-top: $spacing-md;
+
+  // ------------------------------------------------------------------
+  // CELULAR (≤600px) — e SÓ ele. Tablet e desktop mantêm contagem à
+  // esquerda + paginação à direita.
+  //
+  // Em 360px a contagem ocupa uma faixa inteira própria (a linha quebra) e
+  // afasta a paginação da tabela que ela controla. Some a contagem, a
+  // paginação centra e encosta.
+  // ------------------------------------------------------------------
+  @include ate-mobile {
+    justify-content: center;
+    gap: $spacing-xs;
+    margin-top: $spacing-xs;
+
+    .tabela-footer__total {
+      display: none;
+    }
+
+    // Uma página só: sem paginação e sem contagem não sobra nada pra mostrar —
+    // sem isto ficaria uma caixa vazia empurrando o que vem depois.
+    &.tabela-footer--so-total {
+      display: none;
+    }
+  }
+
+  // Largura por conteúdo nos botões de página: o QPagination aplica um
+  // min-width INLINE uniforme calculado pelo maior número de páginas
+  // (999 → todos largos, até o "1"). O !important é necessário justamente
+  // por ser estilo inline. 32px preserva o alvo mínimo de clique (eMAG 2.1).
+  .q-pagination .q-btn {
+    min-width: 32px !important;
+    padding: 0 8px;
+
+    // Estes botões não passam pelo `control-base` (são do QPagination, não do
+    // <acai-ui-button>), então o alvo de toque entra aqui. Continuam desenhados
+    // com 32px — engordá-los faria a paginação de 8 páginas ocupar 350px num
+    // celular de 360.
+    @include alvo-toque;
+  }
+}
+
+// Tema escuro: paginação — o `color` default da q-pagination é primary (navy),
+// então os botões inativos (número + borda outline) somem no fundo escuro.
+// Força texto/borda claros.
+.body--dark .tabela-footer .q-pagination {
+  color: var(--acai-text);
+
+  .q-btn {
+    color: var(--acai-text) !important;
+  }
+
+  // Reticências (…) e páginas desabilitadas não podem sumir de todo.
+  .q-btn.disabled {
+    opacity: 0.55 !important;
+  }
+}
+
+// Página ATIVA: o navy chapado não fica legal (e some no escuro). Usa control-on
+// (navy no claro, azul vivo no escuro) + texto branco + leve sombra pra destacar.
+.tabela-footer .q-pagination .q-btn.bg-primary {
+  background: var(--acai-control-on, #{$primary}) !important;
+  color: #fff !important;
+  box-shadow: 0 2px 6px rgba(14, 42, 80, 0.28);
+}
+
+// Atalho de coluna `justification` (texto longo). O corte é POR LINHA (CSS), não por
+// nº de caracteres: um limite de caracteres ignora a largura da coluna e, em coluna
+// estreita, virava uma célula de 15 linhas. Com clamp a linha tem altura previsível
+// em qualquer largura. Prosa também não pode ficar centralizada (herdaria o
+// `align: center` default da coluna) — texto corrido lê-se alinhado à esquerda.
+.celula-justificativa {
+  text-align: left;
+  min-width: 180px;
+  max-width: 420px;
+
+  &__texto {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    line-height: 1.45;
+  }
+
+  // Só vira controle quando há texto escondido (eMAG 2.1: o QTooltip do Quasar abre
+  // no mouseenter e NÃO no focus, então o restante do texto seria inalcançável
+  // sem mouse — o componente controla a abertura pelo v-model no focus/blur, e
+  // Enter/Espaço abrem o modal com o texto inteiro).
+  &__texto--clicavel {
+    cursor: pointer;
+  }
+
+  &__texto:focus-visible {
+    outline: 2px solid var(--acai-control-on, #{$primary});
+    outline-offset: 2px;
+    border-radius: $radius-sm;
+  }
+}
+
+// Prévia do texto. Sem limite ela crescia até cobrir a página inteira (era o
+// "bugadasso" da tela de tipos de ausência), e rolagem aqui dentro NÃO resolve: o
+// Quasar marca o tooltip como `no-pointer-events` (o mouse o atravessa) e ele fecha
+// quando o ponteiro deixa a célula — a barra seria inalcançável. O corte é por
+// linha, e o texto inteiro fica no modal.
+.ds-tooltip.tooltip-justificativa {
+  max-width: min(440px, 90vw);
+  padding: $spacing-sm $spacing-md;
+}
+
+.tooltip-justificativa {
+  &__conteudo {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 8;
+    line-clamp: 8;
+    overflow: hidden;
+    margin: 0;
+    text-align: left;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  &__rodape {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: $spacing-sm 0 0;
+    padding-top: 6px;
+    border-top: 1px solid rgba(255, 255, 255, 0.18);
+    font-size: 0.6875rem;
+    opacity: 0.85;
+  }
+}
+
+// Texto completo dentro do modal: aqui a rolagem é a do `.modal-body`, que o mouse
+// alcança de verdade — e dá pra selecionar e copiar.
+.justificativa-modal {
+  margin: 0;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.progresso-wrapper {
+  display: flex;
+  align-items: center;
+  border-radius: $radius-full;
+  gap: 4px;
+}
+
+.progresso-barra .q-linear-progress__track,
+.progresso-barra .q-linear-progress__model {
+  border-radius: $radius-full;
+}
+
+.progresso-texto {
+  font-weight: bolder;
+}
+
+.skeleton-tabela-grid {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    border: 1px solid var(--acai-border, #{$color-gray-500});
+    padding: 8px 16px;
+  }
+
+  thead tr {
+    background-color: var(--acai-table-header-bg, #{$primary});
+  }
+
+  tbody tr {
+    &:nth-child(odd) {
+      background-color: var(--acai-row-odd, #{$color-gray-400});
+    }
+
+    &:nth-child(even) {
+      background-color: var(--acai-row-even, #{$color-gray-100});
+    }
+  }
+}