acai-ui 1.65.5

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

@@ -0,0 +1,134 @@
+<template>
+  <div ref="rootRef" class="secao-ficha">
+    <q-expansion-item
+      v-model="aberto"
+      dense
+      class="secao-ficha__expansao"
+      header-class="secao-ficha__cabecalho"
+      hide-expand-icon
+    >
+      <template #header>
+        <div class="secao-ficha__cabecalho-conteudo">
+          <div class="secao-ficha__cabecalho-esquerda">
+            <span
+              v-if="exibirIndicador"
+              class="secao-ficha__indicador"
+              :class="classeIndicador"
+              :role="statusLabel ? 'img' : undefined"
+              :aria-label="statusLabel || undefined"
+              :aria-hidden="statusLabel ? undefined : 'true'"
+            />
+            <acai-ui-icon
+              :name="aberto ? 'expand_more' : 'chevron_right'"
+              size="20px"
+              class="secao-ficha__icone"
+            />
+            <component :is="headingTag" class="secao-ficha__titulo">{{ title }}</component>
+          </div>
+          <!-- Os `.stop` continuam AQUI, no wrapper, e não no <acai-ui-actions>:
+               o cabeçalho da section é o gatilho de abrir/fechar, então clicar
+               numa ação não pode colapsar a seção. Como o dropdown do celular
+               nasce dentro deste wrapper, ele herda a mesma proteção — abrir o
+               menu não mexe na expansão. -->
+          <div
+            v-if="$slots.actions"
+            class="secao-ficha__cabecalho-direita"
+            @click.stop
+            @mousedown.stop
+            @touchstart.stop
+          >
+            <acai-ui-actions :label="actionsLabel" :collapse="collapseActions" dense>
+              <slot name="actions" />
+            </acai-ui-actions>
+          </div>
+        </div>
+      </template>
+
+      <div class="secao-ficha__conteudo">
+        <slot />
+      </div>
+    </q-expansion-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import AcaiUiActions from "../actions/acai-ui-actions.vue";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+
+import type { HeadingLevel } from "../container/acai-ui-container-interface";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    status?: boolean | "alert" | null;
+    /** Nível de heading semântico para o título da seção (eMAG 1.3). Default 3. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Rótulo do botão que agrupa o slot `#actions` **no celular** (≤600px),
+     * onde as ações recolhem pra não brigar com o título pela mesma linha.
+     * Default `'Ações'`. No desktop não aparece.
+     */
+    actionsLabel?: string;
+    /**
+     * Recolher o slot `#actions` num dropdown no celular. Default `true`.
+     *
+     * Passe `false` quando as ações forem **só de ícone**: elas já cabem na
+     * linha mesmo em 360px e, dentro do menu, perdem o tooltip que as
+     * explicava — viram desenhos sem rótulo.
+     */
+    collapseActions?: boolean;
+  }>(),
+  {
+    status: null,
+    headingLevel: 3,
+    actionsLabel: "Ações",
+    collapseActions: true,
+  },
+);
+
+// Fallback explícito por consistência (vide Container/Card — mesmo pattern).
+const headingTag = computed(() => `h${props.headingLevel ?? 3}`);
+
+const aberto = defineModel<boolean>({ required: true });
+
+const rootRef = ref<HTMLDivElement | null>(null);
+
+// eMAG req 4.2 / 2.1: o `<q-expansion-item>` aplica `aria-label="Colapso"|"Expandir"` no header
+// focável por padrão, mascarando o título da seção para leitores de tela. Sobrescrevemos com
+// o título da seção (o `aria-expanded` já indica o estado expand/collapse separadamente).
+function ajustarAriaHeader(): void {
+  const header = rootRef.value?.querySelector(".secao-ficha__cabecalho");
+  if (header instanceof HTMLElement) {
+    header.setAttribute("aria-label", props.title);
+  }
+}
+
+onMounted(() => {
+  void nextTick(ajustarAriaHeader);
+});
+
+watch([aberto, () => props.title], () => {
+  void nextTick(ajustarAriaHeader);
+});
+
+const exibirIndicador = computed<boolean>(() => {
+  return props.status !== undefined;
+});
+
+const classeIndicador = computed<string>(() => {
+  if (props.status === "alert") return "secao-ficha__indicador--alerta";
+  if (props.status === true) return "secao-ficha__indicador--positivo";
+  if (props.status === false) return "secao-ficha__indicador--negativo";
+  return "secao-ficha__indicador--neutro";
+});
+
+const statusLabel = computed<string>(() => {
+  if (props.status === "alert") return "Seção com alerta";
+  if (props.status === true) return "Seção concluída";
+  if (props.status === false) return "Seção pendente";
+  return "";
+});
+</script>
+
+<style src="./acai-ui-section-styles.scss" lang="scss" />

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

@@ -0,0 +1,18 @@
+import type { QSelectProps } from 'quasar'
+import type { MaterialIconValues } from '../../constants/lista-icons'
+import type { MedidasKeys } from '../../constants/medidas-espacos'
+
+export interface SelectProps extends Omit<QSelectProps, 'size' | 'modelValue'> {
+  modelValue: string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[] | null
+  size?: MedidasKeys
+  placeholder?: string
+  hint?: string
+  iconLeft?: MaterialIconValues
+  iconRight?: MaterialIconValues
+  required?: boolean
+  /**
+   * Altura máxima do popup de opções (qualquer unidade CSS: `'240px'`, `'50vh'`).
+   * Sem valor, vale o cap interno de 300px, auto-limitado ao viewport.
+   */
+  popupMaxHeight?: string
+}

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

@@ -0,0 +1,322 @@
+<template>
+  <q-select
+    ref="selectRef"
+    v-bind="qSelectProps"
+    v-model="model"
+    :class="classes"
+    :rules="regrasCompostas"
+    :filled="filled"
+    :outlined="outlined"
+    :aria-required="props.required ? 'true' : undefined"
+    bottom-slots
+    no-error-icon
+    @update:model-value="onChange"
+    @popup-show="aoAbrirPopup"
+    @popup-hide="aoFecharPopup"
+  >
+    <template v-if="required" #label>
+      {{ label }}
+      <span class="text-red-10 text-weight-bolder"> * </span>
+    </template>
+    <template v-if="iconLeft" #prepend>
+      <acai-ui-icon :name="iconLeft" />
+    </template>
+    <template v-if="iconRight" #append>
+      <acai-ui-icon :name="iconRight" />
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import type { QSelectProps } from 'quasar'
+import type { SelectProps } from './acai-ui-select-interface'
+import { useRepasseQuasar } from '../../hooks/use-repasse-quasar'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  filled: true,
+  outlined: false,
+  emitValue: true,
+  mapOptions: true,
+  // `undefined` explícito DESLIGA o boolean casting do Vue (prop booleana ausente
+  // vira `false`, não `undefined`). Sem isto o `?? filtroNoInput` lá embaixo nunca
+  // dispara — `false ?? x` devolve `false` — e o combo de autocomplete do
+  // `use-input` fica inalcançável. Mesmo motivo do `stackLabel` no AcaiUiInput.
+  fillInput: undefined,
+  hideSelected: undefined,
+  // 🔴 Mesmo motivo, e aqui o estrago é maior: `dark`/`optionsDark` são
+  // `Boolean | null` no Quasar — `null` herda do tema, `false` FORÇA o claro.
+  // Sem isto, o repasse mandaria `false` em todo campo que não passou a prop e
+  // desligaria o tema escuro do app inteiro. `error` é `Boolean | null` pela
+  // mesma razão: `null` deixa as `rules` decidirem.
+  dark: undefined,
+  optionsDark: undefined,
+  error: undefined,
+})
+
+// Repasse: tudo o que o consumidor passou vai pro q-select, menos o que a lib
+// consome ou compõe. A lista abaixo é das props da PRÓPRIA lib — pequena e sob
+// nosso controle; prop nova do Quasar passa a funcionar sozinha.
+const repasseQuasar = useRepasseQuasar(props, [
+  // Emit próprio da lib, e os três eventos que ela consome e recompõe abaixo:
+  // repassá-los entregaria o evento duplicado ao consumidor.
+  'onChange',
+  'onFilter',
+  'onPopupShow',
+  'onPopupHide',
+  // Compostas logo abaixo.
+  'rules',
+  'options',
+  'inputDebounce',
+  'fillInput',
+  'hideSelected',
+  'popupContentClass',
+  // `size` da lib é `MedidasKeys`, não a escala do Quasar.
+  'size',
+  // Viram ícone nos slots prepend/append; no q-select cairiam como atributo solto.
+  'iconLeft',
+  'iconRight',
+  // `required` desceria pro <input> nativo e ligaria a validação do NAVEGADOR
+  // por cima da do Quasar. A lib expõe isso por aria-required + regra composta.
+  'required',
+  // Só da lib: vira altura máxima do popup, não existe no Quasar.
+  'popupMaxHeight',
+])
+
+const model = defineModel<string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[] | null>()
+
+const emit = defineEmits<{
+  change: [value: string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[] | null]
+}>()
+
+// --- Popup casa com a largura do campo (abordagem imperativa) -----------------
+// O q-select (fit=true) só garante `min-width = campo` no menu; ele CRESCE até a
+// opção mais longa e fica maior que o input. `popup-content-style` (reativo) NÃO
+// resolve porque a position-engine do Quasar seta `max-width` INLINE no `.q-menu`
+// ao posicionar (roda depois → sobrescreve). A solução robusta (validada no est
+// antes da migração): no `@popup-show`, após o menu montar (`nextTick`), setar
+// `width`+`maxWidth` DIRETO no `.q-menu.acai-select-popup` — como isso roda depois
+// da position-engine, nossos valores vencem. As opções então quebram linha dentro
+// da largura do campo (ver `white-space: normal` no `.acai-select-popup .q-item`).
+type QSelectInstance = {
+  $el?: HTMLElement
+  hidePopup?: () => void
+  showPopup?: () => void
+  focus?: () => void
+  blur?: () => void
+}
+
+const selectRef = ref<QSelectInstance | null>(null)
+
+async function ajustarLarguraPopup(): Promise<void> {
+  await nextTick()
+  const raiz = selectRef.value?.$el
+  if (!raiz || typeof document === 'undefined') return
+  const largura = raiz.getBoundingClientRect().width
+  // pega o último menu com a classe do popup (o que acabou de abrir)
+  const menus = document.querySelectorAll<HTMLElement>('.q-menu.acai-select-popup')
+  const menu = menus.item(menus.length - 1)
+  if (!menu) return
+  menu.style.width = `${largura}px`
+  menu.style.maxWidth = `${largura}px`
+  // `important` porque o cap default do .acai-select-popup também é important
+  // (o Quasar seta max-height inline ao posicionar).
+  if (props.popupMaxHeight) {
+    menu.style.setProperty('max-height', props.popupMaxHeight, 'important')
+  }
+}
+
+// A lib consome os três eventos de popup/filtro internamente, então eles não são
+// repassados no v-bind — o handler do consumidor é chamado à mão aqui.
+async function aoAbrirPopup(evt: Event): Promise<void> {
+  await ajustarLarguraPopup()
+  props.onPopupShow?.(evt)
+}
+
+function aoFecharPopup(evt: Event): void {
+  props.onPopupHide?.(evt)
+}
+
+// Escape hatch: sem isto o consumidor não alcança o q-select de dentro da lib —
+// foi o que deixou o bug do popup órfão sem NENHUM workaround possível.
+defineExpose({
+  hidePopup: () => selectRef.value?.hidePopup?.(),
+  showPopup: () => selectRef.value?.showPopup?.(),
+  focus: () => selectRef.value?.focus?.(),
+  blur: () => selectRef.value?.blur?.(),
+})
+
+const classes = computed(() => [
+  'ds-input',
+  {
+    'ds-input--error': props.error,
+    'ds-input--disabled': props.disable,
+  },
+])
+
+// use-input filtra as options por padrão: opcoesVisiveis é a lista reduzida
+// pelo @filter interno; sem use-input o Quasar não dispara o filtro e a lista
+// espelha props.options via watch.
+const opcoesVisiveis = ref<unknown[]>([])
+
+watch(
+  () => props.options,
+  (novas) => {
+    opcoesVisiveis.value = novas ? [...novas] : []
+  },
+  { immediate: true },
+)
+
+function obterLabel(opcao: unknown): string {
+  if (typeof props.optionLabel === 'string') {
+    const valor = (opcao as Record<string, unknown>)[props.optionLabel]
+    if (valor !== undefined && valor !== null) return String(valor)
+  } else if (typeof props.optionLabel === 'function') {
+    return String(props.optionLabel(opcao) ?? '')
+  }
+  if (typeof opcao === 'object' && opcao !== null && 'label' in opcao) {
+    return String((opcao as { label?: unknown }).label ?? '')
+  }
+  return String(opcao ?? '')
+}
+
+function sanitizarTexto(valor: unknown): string {
+  return String(valor ?? '')
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .trim()
+}
+
+const filtrarOpcoes: QSelectProps['onFilter'] = (val, update) => {
+  const base = props.options ?? []
+  if (!props.useInput) {
+    update(() => {
+      opcoesVisiveis.value = [...base]
+    })
+    return
+  }
+
+  const needle = sanitizarTexto(val)
+  update(() => {
+    opcoesVisiveis.value =
+      needle === ''
+        ? [...base]
+        : base.filter((opcao) => sanitizarTexto(obterLabel(opcao)).includes(needle))
+  })
+}
+
+// fill-input + hide-selected mostram o label selecionado no próprio campo de
+// digitação — só faz sentido em seleção única (multiple/chips exibem fora dele).
+const filtroNoInput = computed(() => Boolean(props.useInput) && !props.multiple && !props.useChips)
+
+// Com `@filter` do consumidor (busca server-side: ele chama a API e repovoa as
+// options), quem manda é ele — a lib não filtra client-side nem intermedia a
+// lista, senão o filtro interno reduziria de novo o que já veio filtrado.
+const filtroExterno = computed(() => props.onFilter)
+
+const qSelectProps = computed(() => ({
+  ...repasseQuasar.value,
+  // Com filtro externo (`@filter` do consumidor) as opções são dele; sem, a lib
+  // filtra internamente e serve a lista já reduzida.
+  options: filtroExterno.value ? (props.options ?? []) : opcoesVisiveis.value,
+  onFilter: filtroExterno.value ?? filtrarOpcoes,
+  inputDebounce: props.inputDebounce ?? (props.useInput ? 0 : undefined),
+  fillInput: props.fillInput ?? filtroNoInput.value,
+  hideSelected: props.hideSelected ?? filtroNoInput.value,
+  // A classe da lib é o gancho de estilo do popup e não pode sumir — mas
+  // sobrescrever a do consumidor tirava dele a única forma de estilizar o
+  // popup. As duas convivem.
+  popupContentClass: ['acai-select-popup', props.popupContentClass].filter(Boolean).join(' '),
+}))
+
+function onChange(value: string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[] | null): void {
+  emit('change', value)
+}
+
+import FormRules from '../../utils/form-rules'
+
+const regrasCompostas = computed(() => {
+  const regras = [...(props.rules ?? [])]
+  if (props.required) regras.unshift(FormRules.campoObrigatorio)
+  return regras
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/ds-input-base';
+
+// O valor selecionado NUNCA deforma o campo. Labels longas (ex.: "08 -
+// DEFICIÊNCIA OU NÃO ACIONAMENTO DO SISTEMA DE ILUMINAÇÃO...") faziam o campo
+// crescer/quebrar em várias linhas — agora ficam em UMA linha e cortam com
+// reticências. `min-width: 0` permite o filho flex encolher (sem isso o
+// text-overflow nunca dispara). Não forçamos `nowrap` no wrapper pra preservar
+// a quebra natural de vários chips no multiple.
+:deep(.q-field__native) {
+  min-width: 0;
+}
+
+:deep(.q-field__native > span) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// use-chips: o chip QUEBRA LINHA (mostra o valor inteiro) e cresce em altura, em
+// vez de truncar. O campo continua preso à coluna (o consumidor põe `min-width: 0`
+// no wrapper que é o grid-item), então o chip quebra na largura do campo em vez de
+// esticá-lo. `height: auto` deixa o chip acompanhar as linhas.
+:deep(.q-field__native .q-chip) {
+  max-width: 100%;
+  height: auto;
+}
+
+:deep(.q-field__native .q-chip .q-chip__content) {
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: 1.3;
+}
+</style>
+
+<!-- NÃO-scoped de propósito: o popup do q-select é teleportado pro body, então
+     um bloco scoped (data-v) não o alcança. Não dá pra confiar no dark nativo do
+     Quasar aqui — retingimos explicitamente com os tokens --acai-* pra funcionar
+     em qualquer consumidor, sem depender de config.dark. Light idêntico (fallback). -->
+<style lang="scss">
+.acai-select-popup {
+  background: var(--acai-surface, #fff);
+  color: var(--acai-text, #1f1f1f);
+
+  // Popup capado: evita o menu gigante que "pulava" abrindo ora pra cima ora pra
+  // baixo. A position-engine do Quasar mede o conteúdo DEPOIS do CSS, então o cap
+  // entra no cálculo de posicionamento (Quasar passa a posicionar um popup de
+  // altura fixa → direção consistente). `min(...)` auto-limita ao viewport pra o
+  // `!important` nunca estourar a tela em telas baixas. `!important` é necessário
+  // porque o Quasar seta max-height inline.
+  // 300px (~7 opções): 400px ainda tomava metade da tela. Quem precisar de outro
+  // valor usa a prop `popup-max-height` (seta inline com important, vence este).
+  // `vh` só como fallback: no mobile ele mede a viewport GRANDE (barra de
+  // endereço recolhida), então a conta sobra e o popup passa da tela. `dvh`
+  // acompanha a barra aparecendo/sumindo; quem não entende ignora a linha.
+  max-height: min(300px, calc(100vh - 88px)) !important;
+  max-height: min(300px, calc(100dvh - 88px)) !important;
+
+  .q-item {
+    color: var(--acai-text, #1f1f1f);
+    // O popup é capado na largura do campo (via popup-content-style medido no
+    // componente); a opção quebra linha dentro dessa largura em vez de esticar o
+    // menu. `min-height: auto` deixa o item crescer com as linhas.
+    white-space: normal;
+    overflow-wrap: break-word;
+    min-height: auto;
+  }
+
+  .q-item--active,
+  .q-item.q-manual-focusable--focused,
+  .q-item--clickable:hover {
+    background: var(--acai-surface-hover, #f2f2f2);
+  }
+}
+</style>

package/src/components/session-clock/acai-ui-session-clock.vue

@@ -0,0 +1,111 @@
+<template>
+  <span
+    class="ds-session-clock"
+    :class="{ 'ds-session-clock--alerta': emAlerta }"
+    role="timer"
+    :aria-label="`Tempo de sessão: ${horasMinutosSegundos}`"
+    :title="`Tempo restante de sessão: ${horasMinutosSegundos}`"
+  >
+    <acai-ui-icon name="schedule" size="16px" class="ds-session-clock__icone" />
+    <!-- prettier-ignore -->
+    <span class="ds-session-clock__valor">{{ horasMinutos }}<span v-if="segundos" class="ds-session-clock__segundos">:{{ segundos }}</span></span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useContadorSessao } from '../../hooks/use-contador-sessao'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Instante de expiração da sessão (epoch ms ou Date). */
+    expiresAt?: number | Date | null
+    /** Minutos restantes a partir dos quais entra em alerta. */
+    warningMinutes?: number
+  }>(),
+  {
+    expiresAt: null,
+    warningMinutes: 5,
+  },
+)
+
+const emit = defineEmits<{
+  /** Sessão expirou (o tempo zerou). O consumidor decide (ex.: logout). */
+  expired: []
+}>()
+
+const { horasMinutos, horasMinutosSegundos, emAlerta } = useContadorSessao(
+  () => props.expiresAt,
+  {
+    minutosAlerta: props.warningMinutes,
+    aoExpirar: () => emit('expired'),
+  },
+)
+
+// Só os segundos, para renderizar num tamanho menor que HH:MM. Sem expiração o
+// hook devolve '--' (sem os dois pontos), e aí não há segundos para mostrar.
+const segundos = computed(() => {
+  const partes = horasMinutosSegundos.value.split(':')
+  return partes.length === 3 ? partes[2]! : ''
+})
+</script>
+
+<style lang="scss" scoped>
+// Relógio digital da sessão (HH:MM:SS) — dígitos monoespaçados/tabulares, ícone
+// de relógio, num "display" em pílula. Fica no header, ao lado das preferências.
+// Os segundos vêm menores que HH:MM e assentados na MESMA linha de base.
+.ds-session-clock {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: var(--acai-surface-2, #f6f8fc);
+  border: 1px solid var(--acai-border-subtle, #e4e8f1);
+  color: var(--acai-text, #{$color-gray-800});
+  white-space: nowrap;
+
+  // Ajuste ÓPTICO: dígitos não têm descendente, então ocupam só o topo da própria
+  // caixa — o centro visual dos números fica ~0.7px acima do centro da caixa. Com
+  // `align-items: center` o ícone alinha pelas CAIXAS e parece baixo. Sobe 1px.
+  // `transform` (e não margin) pra não mexer no layout da pílula.
+  &__icone {
+    transform: translateY(-1px);
+  }
+
+  &__valor {
+    // Layout INLINE de propósito: dois inline-boxes irmãos já compartilham a
+    // linha de base nativamente — é o que assenta os segundos menores "por
+    // baixo", sem flex. Usar flex aqui só acrescentaria caixa sem ganho.
+    // O ":" cola no minuto porque os spans estão adjacentes no template (sem
+    // espaço em branco entre eles).
+    font-family: ui-monospace, 'Courier New', monospace;
+    font-weight: 700;
+    font-size: 0.95rem;
+    letter-spacing: 1px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  // `em` (não `rem`): acompanha o tamanho do valor se ele for ajustado.
+  &__segundos {
+    font-size: 0.78em;
+    font-weight: 600;
+    opacity: 0.75;
+  }
+
+  // Alerta: sessão prestes a expirar.
+  &--alerta {
+    color: $color-yellow-800;
+    background: $color-yellow-50;
+    border-color: $color-yellow-300;
+  }
+}
+
+.body--dark .ds-session-clock--alerta {
+  color: $color-yellow-200;
+  background: rgba(240, 192, 101, 0.14);
+  border-color: rgba(240, 192, 101, 0.4);
+}
+</style>

package/src/components/stepper/acai-ui-step-interface.ts

@@ -0,0 +1,18 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+export interface StepProps {
+  name: string | number
+  title: string
+  subtitle?: string
+  icon?: MaterialIconValues
+  prefixo?: string | number
+  done?: boolean
+  error?: boolean
+  disable?: boolean
+  /**
+   * `| undefined` explícito: sob `exactOptionalPropertyTypes` é o que permite o
+   * `withDefaults(..., { headerNav: undefined })` do componente — e é esse
+   * default que preserva o tri-state do `q-step` (ver o comentário lá).
+   */
+  headerNav?: boolean | undefined
+}

package/src/components/stepper/acai-ui-step.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-step
+    :name="name"
+    :title="title"
+    :caption="subtitle"
+    :icon="icon"
+    :prefix="prefixo"
+    :done="done"
+    :error="error"
+    :disable="disable"
+    :header-nav="headerNav"
+  >
+    <slot />
+  </q-step>
+</template>
+
+<script setup lang="ts">
+import type { StepProps } from './acai-ui-step-interface'
+
+/**
+ * 🔴 `headerNav: undefined` é OBRIGATÓRIO, não estilo.
+ *
+ * O Vue converte prop declarada como `Boolean` e não informada em `false` — não
+ * em `undefined`. Sem o default explícito aqui, este wrapper repassava
+ * `:header-nav="false"` ao `<q-step>` e ATROPELAVA o default `true` dele, que é
+ * o que faz a etapa herdar o `header-nav` do stepper.
+ *
+ * O estrago só aparecia no stepper VERTICAL, porque é lá que o `QStep` desenha o
+ * próprio cabeçalho a partir das próprias props (no horizontal quem desenha é o
+ * `QStepper`, lendo o vnode do template, que nunca teve a chave). Resultado: no
+ * vertical o `header-nav` do stepper não fazia nada e o cabeçalho não clicava.
+ *
+ * Os outros booleanos (`done`, `error`, `disable`) não precisam disso: o default
+ * do Quasar para eles também é `false`, então virar `false` aqui não muda nada.
+ */
+withDefaults(defineProps<StepProps>(), { headerNav: undefined })
+</script>