acai-ui 1.65.5

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

@@ -0,0 +1,340 @@
+<template>
+  <div v-if="skeleton" class="skeleton-tabela">
+    <table class="skeleton-tabela-grid" bordered>
+      <thead>
+        <tr class="header-class-tabela">
+          <th v-for="col in columnCountReal" :key="col">
+            <q-skeleton type="text" width="70%" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="linha in 10" :key="linha" class="linha-cor">
+          <td v-for="col in columnCountReal" :key="col">
+            <q-skeleton type="text" width="90%" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="tabela-footer">
+      <q-skeleton type="text" width="150px" />
+      <q-skeleton width="300px" />
+    </div>
+  </div>
+
+  <template v-else>
+    <div ref="rootRef">
+      <q-table
+        bordered
+        flat
+        :dense="dense"
+        separator="cell"
+        table-header-class="header-class-tabela"
+        hide-pagination
+        wrap-cells
+        :rows="rows"
+        :columns="computedColumns"
+        :class="tableClass"
+        :rows-per-page-options="[0]"
+        no-data-label="Nenhum resultado encontrado!"
+        row-key="name"
+        table-class="linha-cor"
+      >
+        <!-- eMAG 3.10: <th scope="col"> para associar células de dados aos cabeçalhos.
+             A classe `header-class-tabela` precisa ser aplicada manualmente em cada <q-th>
+             porque o slot custom sobrescreve o `table-header-class` automático do <q-table>. -->
+        <template #header="headerProps">
+          <q-tr :props="headerProps">
+            <q-th
+              v-for="col in headerProps.cols"
+              :key="col.name"
+              :props="headerProps"
+              scope="col"
+              class="header-class-tabela"
+            >
+              {{ col.label }}
+            </q-th>
+          </q-tr>
+        </template>
+
+        <template #body-cell="cellProps">
+          <q-td :props="cellProps" class="vertical-middle">
+            <template v-if="cellProps.col.name === 'action'">
+              <slot :cell="cellProps.value" :name="cellProps.col.name" :row="cellProps.row" />
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'cpfCnpj') && temValor(cellProps.value)">
+              {{ formatarDocumento(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'cep') && temValor(cellProps.value)">
+              {{ formatarCep(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'placa') && temValor(cellProps.value)">
+              {{ formatarPlacaBR(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'date') && temValor(cellProps.value)">
+              {{ formatarData(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'phone') && temValor(cellProps.value)">
+              {{ formatarTelefone(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'amount') && temValor(cellProps.value)">
+              {{ formatarValorBR(cellProps.value) }}
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'badge')">
+              <q-badge
+                :outline="cellProps.value === null"
+                class="badge text-uppercase"
+                :color="statusBadge(cellProps.value).color"
+                :label="statusBadge(cellProps.value).label"
+              />
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'justification') && temValor(cellProps.value)">
+              <acai-ui-table-justificativa
+                :texto="String(cellProps.value)"
+                :titulo="cellProps.col.label"
+              />
+            </template>
+
+            <template v-else-if="isColumn(cellProps.col.name, 'progress') && temValor(cellProps.value)">
+              <div v-if="normalizarPercentual(cellProps.value) !== null" class="progresso-wrapper">
+                <q-linear-progress
+                  :value="(normalizarPercentual(cellProps.value) ?? 0) / 100"
+                  :color="corProgresso(cellProps.value)"
+                  rounded
+                  size="16px"
+                  class="progresso-barra"
+                />
+                <span class="progresso-texto">{{ normalizarPercentual(cellProps.value) }}%</span>
+              </div>
+            </template>
+
+            <template v-else-if="temValor(cellProps.value)">
+              <slot :cell="cellProps.value" :name="cellProps.col.name" :row="cellProps.row">
+                {{ cellProps.value }}
+              </slot>
+            </template>
+
+            <template v-else>
+              <acai-ui-icon name="close" color="grey-6" size="md" />
+            </template>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+
+    <!-- Rodapé: contagem à esquerda, paginação à direita — inalterado no
+         desktop e no tablet.
+
+         SÓ NO CELULAR (≤600px) o arranjo muda, e via CSS (`ate-mobile`), porque
+         a mudança é de ESTILO e não de estrutura: a contagem some e a paginação
+         fica centrada e colada na tabela. Em 360px aquela linha de texto comia
+         uma faixa inteira e empurrava o controle pra longe da tabela a que ele
+         pertence. Ver `acai-ui-table-styles.scss`.
+
+         `tabela-footer--so-total` marca o caso "uma página só": aí o rodapé tem
+         apenas a contagem, e no celular — onde ela é escondida — sobraria uma
+         caixa vazia com margem. -->
+    <div
+      v-if="totalPages && model"
+      class="tabela-footer"
+      :class="{ 'tabela-footer--so-total': !paginacaoVisivel }"
+    >
+      <p class="tabela-footer__total text-caption">
+        Total de elementos: <b>{{ totalItems }}</b>
+      </p>
+
+      <q-pagination
+        v-if="paginacaoVisivel"
+        v-model="paginaAtual"
+        :max="maximoPaginas"
+        :max-pages="5"
+        direction-links
+        outline
+        active-color="primary text-white"
+        active-design="unelevated"
+      />
+    </div>
+  </template>
+</template>
+
+<script generic="Row extends object" lang="ts" setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { QTableColumn } from 'quasar'
+import type { ColumnShortcut, TableProps, TableSlot } from './acai-ui-table-interface'
+import { statusBadge } from '../../constants/status-badge'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import AcaiUiTableJustificativa from './acai-ui-table-justificativa.vue'
+import {
+  formatarDocumento,
+  formatarCep,
+  formatarPlacaBR,
+  formatarTelefone,
+  formatarData,
+  formatarValorBR,
+  temValor,
+} from '../../utils/formatadores'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TableProps<Row>>(), {
+  rows: () => [],
+  columns: () => [],
+  tableClass: '',
+  totalPages: 1,
+  totalItems: 0,
+  modelValue: 1,
+  skeleton: false,
+  columnCount: 0,
+})
+
+const emit = defineEmits<{
+  pagination: [currentPage: number]
+  'update:modelValue': [currentPage: number]
+}>()
+
+defineSlots<TableSlot<Row>>()
+
+const model = defineModel<number>()
+const paginacaoVisivel = computed(() => props.totalPages > 1)
+
+/**
+ * O `<q-pagination>` exige `number`, e tanto o `defineModel<number>()` (que é
+ * `number | undefined`) quanto o `totalPages` visto pelo template chegam
+ * opcionais — num `<script generic>` o vue-tsc não propaga o `withDefaults` pro
+ * template. Antes quem estreitava os dois era o `v-if="totalPages && model"` do
+ * rodapé; agora que o rodapé depende do `paginacaoVisivel`, o default explícito
+ * mora aqui, onde dá pra ler o porquê.
+ */
+const paginaAtual = computed<number>({
+  get: () => model.value ?? 1,
+  set: (valor) => {
+    model.value = valor
+  },
+})
+const maximoPaginas = computed<number>(() => props.totalPages ?? 1)
+const columnCountReal = computed(() => props.columnCount || props.columns.length || 1)
+
+const rootRef = ref<HTMLDivElement | null>(null)
+
+// eMAG 3.9: `<caption>` no `<table>` para identificar a tabela para leitores de tela.
+// `<q-table>` não tem prop nativa pra isso — injetamos no DOM via ref.
+// Retorna true quando conseguiu encontrar o `<table>` e ajustar (ou marcar pra remover).
+function ajustarCaption(): boolean {
+  const tabela = rootRef.value?.querySelector('table')
+  if (!(tabela instanceof HTMLTableElement)) return false
+  const existente = tabela.querySelector(':scope > caption')
+  if (props.caption) {
+    if (existente) {
+      existente.textContent = props.caption
+    } else {
+      const caption = document.createElement('caption')
+      caption.textContent = props.caption
+      // visualmente oculto, mas lido por leitores de tela (sr-only)
+      caption.style.cssText =
+        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;'
+      tabela.insertBefore(caption, tabela.firstChild)
+    }
+  } else if (existente) {
+    existente.remove()
+  }
+  return true
+}
+
+// Tenta injetar até o `<table>` estar montado (q-table pode renderizar com delay).
+function ajustarCaptionComRetry(maxTentativas = 10): void {
+  let tentativas = 0
+  const tentar = (): void => {
+    if (ajustarCaption()) return
+    if (++tentativas >= maxTentativas) return
+    requestAnimationFrame(tentar)
+  }
+  void nextTick(tentar)
+}
+
+onMounted(ajustarCaptionComRetry)
+watch(() => [props.caption, props.rows, props.skeleton], () => {
+  ajustarCaptionComRetry()
+})
+
+watch(
+  () => model.value,
+  (paginaAtual, paginaAnterior) => {
+    if (paginaAtual === paginaAnterior || !paginaAtual) return
+    emit('pagination', paginaAtual)
+  },
+)
+
+const computedColumns = computed<QTableColumn[]>(() =>
+  props.columns.map((col) => {
+    const field: QTableColumn['field'] =
+      typeof col.field === 'string'
+        ? col.field
+        : (row: unknown) => (col.field as (r: Row) => unknown)(row as Row)
+
+    const userFormat = col.format
+    const format: QTableColumn['format'] | undefined = userFormat
+      ? (val: unknown, row: unknown) => userFormat(val, row as Row)
+      : undefined
+
+    const result: QTableColumn = {
+      name: col.name,
+      label: col.label,
+      field,
+      align: col.align || 'center',
+      headerClasses: 'vertical-middle',
+    }
+
+    if (col.required !== undefined) result.required = col.required
+    if (col.sortable !== undefined) result.sortable = col.sortable
+    if (col.classes !== undefined) result.classes = col.classes
+    if (col.style !== undefined) result.style = col.style
+    if (format !== undefined) result.format = format
+
+    return result
+  }),
+)
+
+const isColumn = (name: string, key: ColumnShortcut) => name === key || name.endsWith(`.${key}`)
+
+// Mapa de status + resolver movidos pra `constants/status-badge` (compartilhado com
+// o AcaiUiBadge). O atalho `.badge` continua usando o mesmo `statusBadge`.
+
+function normalizarPercentual(valor: unknown): number | null {
+  if (valor == null) return null
+  if (typeof valor === 'number' && Number.isFinite(valor)) {
+    return Math.min(100, Math.max(0, Math.round(valor)))
+  }
+  if (typeof valor === 'object') {
+    const progresso = valor as { completo?: unknown; total?: unknown }
+    const completo = Number(progresso.completo)
+    const total = Number(progresso.total)
+    if (Number.isFinite(completo) && Number.isFinite(total) && total > 0) {
+      return Math.min(100, Math.max(0, Math.round((completo / total) * 100)))
+    }
+  }
+  if (typeof valor === 'string') {
+    const numero = Number(valor.replace(',', '.'))
+    if (Number.isFinite(numero)) return Math.min(100, Math.max(0, Math.round(numero)))
+  }
+  return null
+}
+
+function corProgresso(valor: unknown): string {
+  const percentual = normalizarPercentual(valor)
+  if (percentual === null) return 'grey-6'
+  if (percentual <= 25) return 'negative'
+  if (percentual < 100) return 'warning'
+  return 'positive'
+}
+</script>
+
+<style lang="scss" src="./acai-ui-table-styles.scss" />

package/src/components/tabs/acai-ui-tab.vue

@@ -0,0 +1,10 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import type { TabPaneProps } from './acai-ui-tabs-interface'
+
+// `key` é lido de vnode.key pelo acai-ui-tabs (não é prop — Vue reserva `key`).
+defineProps<TabPaneProps>()
+</script>

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

@@ -0,0 +1,48 @@
+import type { VNode } from 'vue'
+import type { QTabsProps } from 'quasar'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+export type TabsUiProps = Pick<
+  QTabsProps,
+  | 'dense'
+  | 'align'
+  | 'breakpoint'
+  | 'outsideArrows'
+  | 'mobileArrows'
+  | 'inlineLabel'
+  | 'narrowIndicator'
+>
+
+export interface TabsProps extends TabsUiProps {
+  tabsClass?: string
+  alert?: boolean
+  usePanels?: boolean
+}
+
+export type TabName = string | number
+
+// `key` NÃO é declarado aqui de propósito: o Vue reserva `key` como atributo de
+// reconciliation, então declará-lo como prop dispara "Invalid prop name: 'key'".
+// O identificador da aba é lido de `vnode.key` no acai-ui-tabs (ver NormalizedPane).
+export interface TabPaneProps {
+  label: string
+  icon?: MaterialIconValues
+  disabled?: boolean
+  /**
+   * Mantém o pane vivo ao trocar de aba (`<KeepAlive>`): o estado interno
+   * sobrevive e os hooks `onActivated`/`onDeactivated` disparam.
+   *
+   * Default: `false` — o pane inativo DESMONTA e volta limpo. Use `keep-alive`
+   * só quando o estado precisar sobreviver de propósito (ex.: rascunho de form);
+   * mantê-lo montado sem querer faz o estado da aba antiga vazar pro contexto
+   * novo (filtro de um setor filtrando a lista de outro).
+   */
+  keepAlive?: boolean
+  tooltip?: string
+  alert?: boolean
+}
+
+export interface NormalizedPane<T extends TabName> extends TabPaneProps {
+  key: T
+  vnode: VNode
+}

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

@@ -0,0 +1,78 @@
+@import '../../scss/breakpoints';
+
+.container-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .container-acoes {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ds-tabs {
+  .q-tab {
+    text-transform: none;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--acai-text-muted, #{$color-gray-600});
+    min-height: 48px;
+    padding: 0 16px;
+  }
+
+  .q-tab--active {
+    color: var(--acai-heading, #{$primary});
+    font-weight: 600;
+  }
+
+  // Indicador (underline) acompanha o título ativo: navy no claro, BRANCO no dark.
+  // Antes vinha de `indicator-color="primary"` (navy fixo → apagado no escuro).
+  .q-tab__indicator {
+    background: var(--acai-heading, #{$primary});
+  }
+
+  .q-tabs__content {
+    gap: 0;
+  }
+}
+
+.ds-tabs__panel {
+  padding-top: $spacing-md;
+  padding-bottom: 0;
+}
+
+.ds-tabs__tab-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.ds-tabs__tab-icon {
+  font-size: 1.125rem;
+}
+
+.ds-tabs__tab-badge {
+  font-size: 1.125rem;
+  // Tinta de erro dark-aware — clareia no escuro e recolore no daltônico.
+  color: var(--acai-negative, #{$negative});
+}
+
+// Abaixo do desktop as ações descem pra linha própria, centralizadas.
+//
+// Era `max-width: 1600px` — número solto que não correspondia a nada e não
+// batia com nenhum outro componente. `ate-laptop` (< 1440) é o ponto da escala
+// mais próximo: laptop e menor empilha, desktop mantém lado a lado.
+@include ate-laptop {
+  .container-tabs {
+    display: block;
+
+    .container-acoes {
+      margin-top: $spacing-md;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="container-tabs">
+    <q-tabs
+      v-model="tab"
+      no-caps
+      align="left"
+      class="ds-tabs"
+      :breakpoint="breakpoint"
+      :outside-arrows="outsideArrows"
+      :mobile-arrows="mobileArrows"
+      :dense="dense"
+      :class="tabsClass"
+    >
+      <q-tab
+        v-for="painel in paineis"
+        :key="`tab-${painel.key}`"
+        :name="painel.key"
+        :disable="painel.disabled"
+        class="ds-tabs__tab"
+      >
+        <div class="ds-tabs__tab-content">
+          <acai-ui-icon v-if="painel.icon" :name="painel.icon" class="ds-tabs__tab-icon" />
+          <span>{{ painel.label }}</span>
+          <!-- Sem `color="negative"`: a classe `text-negative` do Quasar é hex
+               fixo (#941c2a) e no tema escuro o alerta da aba ficava em 1,34:1.
+               A cor vem do `--acai-negative` pelo CSS (ver o styles). -->
+          <acai-ui-icon v-if="painel.alert" name="error" class="ds-tabs__tab-badge" />
+        </div>
+        <acai-ui-tooltip v-if="painel.tooltip">{{ painel.tooltip }}</acai-ui-tooltip>
+      </q-tab>
+    </q-tabs>
+
+    <div class="container-acoes">
+      <slot name="actions" />
+    </div>
+  </div>
+
+  <!-- O wrapper permanece (v-show) mas o CONTEÚDO tem v-if: é o que faz o pane
+       inativo desmontar de verdade e o `keep-alive` ter onde cachear.
+       - sem keepAlive: v-if puro → desmonta ao sair, remonta limpo ao voltar.
+       - com keepAlive: o <KeepAlive> sobrevive ao toggle (está fora do v-if), então
+         monta na 1ª visita, preserva o estado e dispara activated/deactivated. -->
+  <div v-if="props.usePanels" class="ds-tabs__panels">
+    <div
+      v-for="pane in paineis"
+      :key="`panel-${pane.key}`"
+      v-show="tab === pane.key"
+      class="ds-tabs__panel"
+    >
+      <KeepAlive v-if="pane.keepAlive">
+        <component :is="pane.vnode" v-if="tab === pane.key" />
+      </KeepAlive>
+      <component :is="pane.vnode" v-else-if="tab === pane.key" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="TName extends string | number">
+import { computed, useSlots, type VNode } from 'vue'
+import { achatarSlot, lerBooleano, normalizarProps } from '../../utils/vnode-slot'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { NormalizedPane, TabsProps } from './acai-ui-tabs-interface'
+import AcaiUiTooltip from '../tooltip/acai-ui-tooltip.vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  dense: false,
+  usePanels: true,
+  alert: false,
+  mobileArrows: true,
+  outsideArrows: true,
+  // ⚠️ NÃO migrar pra escala de scss/_breakpoints.scss — não é um breakpoint de
+  // viewport. No QTabs (`QTabs.js`) ele só alimenta
+  //
+  //     justify.value = size < parseInt(props.breakpoint, 10)
+  //
+  // onde `size` é a largura do PRÓPRIO contêiner de abas, não da tela. Controla
+  // se as abas se esticam pra preencher a linha. O 1599 é um jeito de dizer
+  // "estica sempre" (o default do Quasar é 600, que deixaria de esticar em
+  // qualquer contêiner meio largo). Trocar por 1440 mudaria a aparência das
+  // abas em qualquer contêiner entre 1440 e 1599px, sem ganho nenhum de
+  // responsividade.
+  breakpoint: 1599,
+})
+
+const tab = defineModel<TName>({ required: true })
+const slots = useSlots() as {
+  default?: () => VNode[]
+  actions?: () => VNode[]
+}
+
+/**
+ * `normalizarProps`, `lerBooleano` e `achatarSlot` moram em `utils/vnode-slot`
+ * desde que o `<acai-ui-actions>` passou a ler vnode de slot também (pra
+ * converter `<acai-ui-button>` em item de menu no celular). Nasceram aqui, cada
+ * uma pagando um bug — a camelização porque `<acai-ui-tab :keep-alive="true">`
+ * chega com a chave `'keep-alive'` e o pane nunca entrava no ramo do
+ * `<KeepAlive>`; o boolean casting porque atributo pelado chega como `''`, e
+ * `Boolean('')` é `false`. Compartilhadas justamente pra não divergirem.
+ */
+const paineis = computed<ReadonlyArray<NormalizedPane<TName>>>(() => {
+  const vnodes = achatarSlot(slots.default?.())
+
+  return vnodes
+    .map((v) => {
+      const p = normalizarProps(v?.props as Record<string, unknown> | null | undefined)
+
+      const iconProp = p.icon as MaterialIconValues | undefined
+
+      // Vue 3 trata `key` como atributo reservado de reconciliation: ao
+      // usar `<acai-ui-tab key="x">` no template, o valor vai pra
+      // `vnode.key` (NÃO pra `vnode.props.key`). Lemos do vnode com
+      // fallback pra props caso alguém passe via outro mecanismo.
+      const chave = (v?.key ?? p.key) as TName
+
+      const pane: NormalizedPane<TName> = {
+        key: chave,
+        label: String(p.label ?? ''),
+        vnode: v,
+        ...(iconProp ? { icon: iconProp } : {}),
+        ...(p.disabled !== undefined ? { disabled: lerBooleano(p.disabled) } : {}),
+        ...(p.keepAlive !== undefined ? { keepAlive: lerBooleano(p.keepAlive) } : {}),
+        ...(p.tooltip !== undefined ? { tooltip: String(p.tooltip) } : {}),
+        ...(p.alert !== undefined ? { alert: lerBooleano(p.alert) } : {}),
+      }
+
+      return pane
+    })
+    .filter((pane) => pane.key !== undefined && pane.label !== '')
+})
+</script>
+
+<style src="./acai-ui-tabs-styles.scss" lang="scss" />

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

@@ -0,0 +1,14 @@
+export interface TimeProps {
+  modelValue: string | null
+  label?: string
+  placeholder?: string
+  hint?: string
+  disable?: boolean
+  readonly?: boolean
+  dense?: boolean
+  outlined?: boolean
+  filled?: boolean
+  color?: string
+  rules?: ((val: string) => boolean | string)[]
+  required?: boolean
+}