acai-ui 1.65.5

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

@@ -0,0 +1,37 @@
+export interface FormProps {
+  title?: string
+  submitLabel?: string
+  /**
+   * Rótulo do botão que agrupa o slot `#actions` **no celular** (≤600px), onde
+   * as ações extras colapsam num dropdown pra não espremer a ação principal.
+   * Default `'Ações'`. No desktop não aparece — lá o slot fica solto.
+   */
+  actionsLabel?: string
+  /**
+   * Recolher o slot `#actions` no celular? Default `true`.
+   *
+   * O card e a section já expunham esta saída; o formulário não, e por isso um
+   * formulário com ações só de ícone não tinha como escapar do menu. Passe
+   * `false` pra manter os ícones soltos na linha.
+   */
+  collapseActions?: boolean
+  /**
+   * Ícone do botão de submit. Aceita um nome de ícone Material (string) ou
+   * `false` para não exibir ícone. Default: `'search'`.
+   * (Tipado como `string | boolean` — e não `MaterialIconValues | boolean` —
+   * para o Vue inferir o runtime type `[String, Boolean]` e não warnar o
+   * default string contra um prop-type só-Boolean.)
+   */
+  iconSubmit?: string | boolean
+  hideReset?: boolean
+  hideSubmit?: boolean
+  hideButtons?: boolean
+  hideValidationModal?: boolean
+}
+
+export interface FormError {
+  label: string
+  message: string
+  element: HTMLElement
+  group?: string
+}

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

@@ -0,0 +1,159 @@
+@import '../../scss/breakpoints';
+
+.acai-ui-form {
+  h2 {
+    color: var(--acai-heading, #{$primary});
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 1.5rem;
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  // A linha tem dois grupos: o slot #actions à esquerda e os botões
+  // submit/reset à direita.
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: $spacing-md;
+    // Sem `wrap` os dois grupos são obrigados a caber na mesma linha: um
+    // formulário com "Voltar / Limpar / Pesquisar / Salvar" espreme os botões
+    // até o rótulo cortar em vez de descer. E o `gap` é o piso de respiro que
+    // o `space-between` NÃO garante — ele distribui a sobra, e quando não há
+    // sobra encosta um grupo no outro.
+    flex-wrap: wrap;
+    gap: $spacing-sm;
+
+    @include ate-mobile {
+      // Empilhado, cada grupo na sua linha. Quebrar por wrap deixaria um botão
+      // órfão colado no grupo vizinho, o que confunde quem é ação primária.
+      // A ordem do DOM já ajuda: as ações extras ficam em cima e os botões
+      // principais embaixo, mais perto do polegar.
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  &__actions-extra {
+    display: flex;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+  }
+
+  &__actions-buttons {
+    display: flex;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+
+    // 🔴 Âncora à direita que NÃO depende de ter vizinho.
+    //
+    // O `space-between` do `__actions` só empurra pra direita quando existem
+    // DOIS grupos na linha. Sem o slot `#actions` sobra um filho só, e
+    // `space-between` com um item é igual a `flex-start`: "Pesquisar" e o
+    // limpar iam parar na ESQUERDA. O mesmo formulário mudava de lado conforme
+    // o consumidor tivesse ou não ações extras — e a ação principal precisa
+    // estar sempre no mesmo canto, senão a pessoa procura.
+    //
+    // `margin-left: auto` come toda a sobra à esquerda do grupo, com ou sem
+    // vizinho, e convive com o `space-between` (que deixa de ter o que
+    // distribuir).
+    margin-left: auto;
+
+    // No celular esta é a ÚLTIMA linha, e ela tem uma hierarquia clara:
+    //
+    //   [  Pesquisar — toma tudo que sobra  ] [🗑]
+    //
+    // A ação principal ganha a largura toda porque é a que se quer acertar com
+    // o polegar; o limpar fica no quadrado do próprio ícone. Dividir a linha
+    // meio a meio daria ao "apagar tudo" o mesmo peso visual do "buscar", que é
+    // convite a erro — e num formulário de busca, apagar é irreversível pro que
+    // já foi digitado.
+    @include ate-mobile {
+      flex-wrap: nowrap;
+
+      // 🔴 DESFAZ a âncora acima, e não é detalhe: aqui o pai é `column`, e num
+      // container de coluna a margem `auto` age no eixo CRUZADO — ela ANULA o
+      // `align-items: stretch` e encolhe o grupo até o conteúdo, empurrado pra
+      // direita. O efeito visível era o "Pesquisar" perdendo a largura cheia e
+      // a linha virando [    ] [Pesquisar] [🗑], que é o oposto da hierarquia
+      // desenhada logo abaixo.
+      //
+      // Sem `margin-left: auto` no desktop o grupo cai pra esquerda quando não
+      // há ações extras; com ele no celular o grupo deixa de esticar. Os dois
+      // eixos querem coisas opostas, então a âncora vale só onde a linha é
+      // horizontal.
+      margin-left: 0;
+
+      .acai-ui-form__submit {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      // `flex: 0 0 auto` e não uma largura fixa: o botão já é quadrado pelo
+      // `control-icon-only`, e cravar px aqui brigaria com o alvo de toque de
+      // 44px que o `pointer: coarse` amplia.
+      .acai-ui-form__reset {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  // Dropdown que recolhe o slot #actions no celular: ocupa toda a largura que
+  // sobrar — é o primeiro degrau da hierarquia, acima da ação principal.
+  //
+  // `flex: 1` e NÃO `width: 100%`, que era o que estava aqui e não funcionava
+  // sempre. O pai é `display: flex`, e num item flex a `width` é só a base: com
+  // o `flex-shrink: 1` do default, basta alguém dividir a linha pro item
+  // encolher e a largura cheia virar meia. Acontece quando uma ação fica FORA do
+  // menu — ação só de ícone que o <acai-ui-actions> não recolhe, por exemplo, ou
+  // qualquer coisa que o consumidor ponha no slot e a lib não saiba converter.
+  // Sozinho na linha o resultado é o mesmo de antes; acompanhado, o dropdown
+  // toma o resto em vez de repartir.
+  //
+  // 🔴 `:deep()` é OBRIGATÓRIO, e a falta dele deixou este bloco INTEIRO morto.
+  //
+  // Este arquivo entra num `<style scoped>`, então `.acai-ui-form__actions-menu`
+  // compilava com o `data-v-` do FORMULÁRIO. Só que quem renderiza esse botão é
+  // o `<acai-ui-dropdown>` — outro componente, outro `data-v-` —, então o
+  // seletor não casava com nada e nem o `flex`, nem a cor dark-aware, nem a
+  // borda abaixo chegavam a existir. Medido no navegador: `flex` computado
+  // `0 1 auto` (o default) com a media query batendo e a classe no elemento.
+  //
+  // O `:deep` sai do `__actions-extra`, que é escrito no template do próprio
+  // formulário e portanto carrega o `data-v-` certo. Mesma armadilha já
+  // documentada no `<acai-ui-actions>` pros botões que vêm por slot.
+  &__actions-extra :deep(.acai-ui-form__actions-menu) {
+    @include ate-mobile {
+      flex: 1;
+    }
+
+    // 🔴 COR DARK-AWARE, e por isso NÃO é `color="white"` na prop.
+    //
+    // O default do <acai-ui-dropdown> é `primary`, o navy #0e2a50. Sobre o card
+    // do tema escuro isso dá 1.25:1 — o rótulo some. Mas branco fixo inverte o
+    // problema: no tema claro daria 1.00:1, some igual. Os dois quebram o eMAG
+    // 4.1 (mínimo 4.5:1), cada um num tema.
+    //
+    // `--acai-text` vira sozinho e passa nos dois: 16.48:1 no claro (#1f1f1f
+    // sobre branco) e 9.58:1 no escuro (#dde3ee sobre a superfície). E segue o
+    // daltônico e o alto contraste de graça.
+    //
+    // Não usei `--acai-control-on` (o token de "tinta interativa"): ele existe
+    // pra PREENCHIMENTO de trilho de switch, e como TEXTO no escuro dá 2.82:1 —
+    // reprovaria igual.
+    //
+    // `!important` porque o Quasar declara `.text-primary { color: … !important }`.
+    color: var(--acai-text) !important;
+
+    // O contorno do `outline` sai de `currentColor`, que acabou de virar cor de
+    // texto — ficaria uma moldura forte demais pra um botão secundário.
+    border-color: var(--acai-border) !important;
+  }
+}
+
+// Não há mais CSS de "botão fingindo de item" aqui: desde que o
+// <acai-ui-actions> converte cada <acai-ui-button> num <acai-ui-dropdown-item>,
+// o conteúdo do menu já NASCE linha de menu. A classe
+// `.acai-ui-form__actions-menu-conteudo` que morava aqui era desse arranjo
+// antigo e já estava órfã antes disto.

package/src/components/form/acai-ui-form-validation-modal.vue

@@ -0,0 +1,216 @@
+<template>
+  <q-dialog v-model="aberto">
+    <div class="fvm-panel">
+      <div class="fvm-panel__header">
+        <acai-ui-icon name="warning_amber" size="sm" color="white" />
+        <span class="fvm-panel__titulo">Corrija os campos abaixo</span>
+        <q-space />
+        <q-btn flat dense round color="white" icon="close" size="sm" @click="aberto = false" />
+      </div>
+
+      <div class="fvm-panel__corpo">
+        <p class="fvm-panel__mensagem">
+          {{ erros.length }} campo(s) com preenchimento incorreto:
+        </p>
+
+        <template v-if="temGrupos">
+          <div v-for="(campos, grupo) in errosAgrupados" :key="grupo" class="fvm-panel__grupo">
+            <div class="fvm-panel__grupo-title">{{ grupo }}</div>
+            <ul class="fvm-panel__lista">
+              <li
+                v-for="(erro, i) in campos"
+                :key="i"
+                class="fvm-panel__item"
+                @click="irParaCampo(erro)"
+              >
+                <div class="fvm-panel__item-info">
+                  <span class="fvm-panel__item-label">{{ erro.label }}</span>
+                  <span class="fvm-panel__item-msg">{{ erro.message }}</span>
+                </div>
+                <acai-ui-icon name="arrow_forward" size="14px" class="fvm-panel__item-icon" />
+              </li>
+            </ul>
+          </div>
+        </template>
+
+        <ul v-else class="fvm-panel__lista">
+          <li
+            v-for="(erro, i) in erros"
+            :key="i"
+            class="fvm-panel__item"
+            @click="irParaCampo(erro)"
+          >
+            <div class="fvm-panel__item-info">
+              <span class="fvm-panel__item-label">{{ erro.label }}</span>
+              <span class="fvm-panel__item-msg">{{ erro.message }}</span>
+            </div>
+            <acai-ui-icon name="arrow_forward" size="14px" class="fvm-panel__item-icon" />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormError } from './acai-ui-form-interface'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+const props = defineProps<{
+  erros: FormError[]
+}>()
+
+const aberto = defineModel<boolean>({ required: true })
+
+const emit = defineEmits<{
+  (e: 'navegar', erro: FormError): void
+}>()
+
+const temGrupos = computed(() => props.erros.some(e => e.group))
+
+const errosAgrupados = computed(() => {
+  const grupos: Record<string, FormError[]> = {}
+  for (const erro of props.erros) {
+    const grupo = erro.group || 'Geral'
+    if (!grupos[grupo]) grupos[grupo] = []
+    grupos[grupo]!.push(erro)
+  }
+  return grupos
+})
+
+function irParaCampo(erro: FormError): void {
+  aberto.value = false
+  emit('navegar', erro)
+
+  setTimeout(() => {
+    erro.element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+    // Pulsar o campo para chamar atenção
+    erro.element.classList.add('fvm-highlight')
+    setTimeout(() => erro.element.classList.remove('fvm-highlight'), 2000)
+  }, 300)
+}
+</script>
+
+<style scoped lang="scss">
+.fvm-panel {
+  width: 100%;
+  max-width: 500px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  background: var(--acai-surface, #fff);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 8px 10px 16px;
+    background: var(--q-warning, #{$warning});
+    color: white;
+  }
+
+  &__titulo {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  &__corpo {
+    padding: 16px;
+    // `vh` só como fallback: no Chrome/Safari mobile ele mede a viewport GRANDE
+    // (barra de endereço recolhida), então 60vh pode passar da tela real e
+    // empurrar os botões pra fora. `dvh` acompanha a barra; navegador que não
+    // entende ignora a linha e fica com a de cima.
+    max-height: 60vh;
+    max-height: 60dvh;
+    overflow-y: auto;
+  }
+
+  &__mensagem {
+    margin: 0 0 12px;
+    color: var(--acai-text, #333);
+    font-size: 0.9rem;
+    line-height: 1.55;
+  }
+
+  &__grupo {
+    margin-bottom: 12px;
+
+    &:last-child { margin-bottom: 0; }
+  }
+
+  &__grupo-title {
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: var(--acai-heading, #{$primary});
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--acai-border-subtle, rgba(0, 0, 0, 0.08));
+    margin-bottom: 6px;
+  }
+
+  &__lista {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--acai-surface-hover, #{rgba($primary, 0.06)});
+
+      .fvm-panel__item-icon { opacity: 1; }
+      .fvm-panel__item-label { color: var(--acai-item-hover-text, #{$primary}); }
+    }
+  }
+
+  &__item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--acai-text, #444);
+    transition: color 0.15s;
+  }
+
+  &__item-msg {
+    font-size: 0.75rem;
+    color: var(--acai-negative, #{$negative});
+  }
+
+  &__item-icon {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    // Sem token, o navy ($primary) some sobre a surface navy do dark.
+    color: var(--acai-heading, #{$primary});
+    flex-shrink: 0;
+  }
+}
+</style>
+
+<style lang="scss">
+// Animação de highlight no campo (global para funcionar fora do scoped)
+@keyframes fvm-pulse {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 0 3px rgba($warning, 0.4); }
+}
+
+.fvm-highlight {
+  animation: fvm-pulse 0.6s ease 2;
+  border-radius: 8px;
+}
+</style>