acai-ui 1.65.5

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

@@ -0,0 +1,230 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    :model-value="modelValue ?? null"
+    @hide="aoEsconder"
+    :persistent="persistent"
+  >
+    <div class="alerta-panel" :style="{ maxWidth: maxWidth }">
+      <div :class="['alerta-panel__header', `alerta-panel__header--${color}`]">
+        <acai-ui-icon
+          v-if="resolvedIcon"
+          :name="resolvedIcon"
+          size="md"
+          color="white"
+          :aria-label="iconAriaLabel"
+        />
+        <span class="alerta-panel__titulo">{{ title }}</span>
+        <q-space />
+        <q-btn
+          flat
+          dense
+          round
+          color="white"
+          icon="close"
+          size="sm"
+          aria-label="Fechar"
+          @click="cancelar"
+        />
+      </div>
+
+      <div class="alerta-panel__corpo">
+        <p v-if="message" class="alerta-panel__mensagem">{{ message }}</p>
+        <div
+          v-if="htmlContent"
+          class="alerta-panel__html"
+          v-html="htmlContent"
+        />
+        <slot />
+      </div>
+
+      <div class="alerta-panel__rodape">
+        <acai-ui-button
+          :label="cancelLabel"
+          class="alerta-panel__cancelar"
+          outline
+          @click="cancelar"
+        />
+        <acai-ui-button
+          :label="confirmLabel"
+          :color="confirmButtonColor"
+          @click="confirmar"
+        />
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import AcaiUiButton from "../button/acai-ui-button.vue";
+import AcaiUiIcon from '../icon/acai-ui-icon.vue';
+import type { MaterialIconValues } from "../../constants/lista-icons";
+
+export type AlertColor =
+  | "warning"
+  | "negative"
+  | "info"
+  | "primary"
+  | "positive";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    title?: string;
+    message?: string;
+    htmlContent?: string;
+    icon?: MaterialIconValues;
+    color?: AlertColor;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    persistent?: boolean;
+    maxWidth?: string;
+  }>(),
+  {
+    title: "Confirmação",
+    message: "",
+    htmlContent: "",
+    color: "warning",
+    confirmLabel: "Confirmar",
+    cancelLabel: "Cancelar",
+    persistent: false,
+    maxWidth: "500px",
+  },
+);
+
+const emit = defineEmits([
+  ...useDialogPluginComponent.emits,
+  "update:modelValue",
+]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+defineExpose({ dialogRef });
+
+const iconByColor: Record<AlertColor, MaterialIconValues | undefined> = {
+  warning: 'warning_amber',
+  negative: 'thumb_down',
+  info: 'visibility',
+  primary: undefined,
+  positive: 'thumb_up',
+};
+
+const labelByColor: Record<AlertColor, string> = {
+  warning: 'Alerta',
+  negative: 'Erro',
+  info: 'Informação',
+  primary: 'Confirmação',
+  positive: 'Sucesso',
+};
+
+const resolvedIcon = computed(() =>
+  props.icon ? props.icon : iconByColor[props.color],
+);
+const iconAriaLabel = computed(() => labelByColor[props.color]);
+const confirmButtonColor = computed(() =>
+  props.color === "info" ? "primary" : props.color,
+);
+
+const modoDeclarativo = props.modelValue !== undefined;
+
+function aoEsconder() {
+  onDialogHide();
+  if (modoDeclarativo) emit("update:modelValue", false);
+}
+
+function confirmar() {
+  onDialogOK();
+  if (modoDeclarativo) emit("update:modelValue", false);
+}
+
+function cancelar() {
+  onDialogCancel();
+  if (modoDeclarativo) emit("update:modelValue", false);
+}
+</script>
+
+<style scoped lang="scss">
+.alerta-panel {
+  width: 100%;
+  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;
+    // Ícone + título. Título longo num celular empurra o que vier depois pra
+    // fora da faixa colorida.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 8px 10px 16px;
+    color: white;
+
+    &--warning {
+      background: var(--q-warning, #{$warning});
+    }
+    &--negative {
+      background: var(--q-negative, #{$negative});
+    }
+    &--info {
+      background: var(--q-info, #{$info});
+    }
+    &--primary {
+      background: var(--q-primary, #{$primary});
+    }
+    &--positive {
+      background: var(--q-positive, #{$positive});
+    }
+  }
+
+  &__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;
+    color: var(--acai-text, #333);
+    font-size: 0.9rem;
+    line-height: 1.55;
+  }
+
+  &__html {
+    color: var(--acai-text, #333);
+    font-size: 0.9rem;
+    line-height: 1.55;
+  }
+
+  &__rodape {
+    display: flex;
+    justify-content: flex-end;
+    // Confirmar/Cancelar com rótulos customizados ("Sim, excluir permanentemente")
+    // passam da largura de um celular. Sem wrap um dos botões vaza pra fora do
+    // card — e é o de confirmar, que fica à direita.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0 16px 16px;
+  }
+
+  // Botão cancelar neutro e dark-aware: o `color="grey-7"` fixo ficava cinza sujo
+  // no escuro. `--acai-text-muted` é cinza no claro e claro/quase-branco no escuro;
+  // o contorno do outline (currentColor) acompanha. !important vence o default do botão.
+  &__cancelar.q-btn {
+    color: var(--acai-text-muted, #{$color-gray-700}) !important;
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+/**
+ * Destino de navegação aceito pelo `<acai-ui-container>` em breadcrumbs.
+ * Compatível com `RouteLocationRaw` do vue-router sem importar do vue-router
+ * (a lib é agnóstica de roteador). Aceita:
+ *   - string: path absoluto (ex: '/usuarios/123')
+ *   - objeto: { name, path, params, query, hash } no formato do vue-router
+ */
+export type BreadcrumbTo =
+  | string
+  | {
+      name?: string
+      path?: string
+      params?: Record<string, unknown>
+      query?: Record<string, unknown>
+      hash?: string
+    }
+
+export interface BreadcrumbItem {
+  label: string
+  to?: BreadcrumbTo
+  icon?: MaterialIconValues
+}
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+export interface ContainerProps {
+  title: string
+  breadcrumbs?: BreadcrumbItem[]
+  hideBreadcrumbs?: boolean
+  /** Nível de heading semântico para o título da página (eMAG 1.3). Default 1. */
+  headingLevel?: HeadingLevel
+}

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

@@ -0,0 +1,122 @@
+// Este SCSS é compilado como arquivo isolado (via <style src>), então NÃO herda o
+// preload do additionalData do vite.config (que só vale pro build interno da lib).
+// Consumidores via condition `vue` (docs, sandboxes) leem o source sem esse preload
+// → importar explicitamente as vars usadas abaixo. Ver CLAUDE.md §6.
+@import '../../scss/variables';
+@import '../../scss/spacing';
+@import '../../scss/breakpoints';
+
+// eMAG 1.3: heading semântico do título da página, escondido visualmente
+// (o título visual aparece via último breadcrumb).
+.container-heading-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.container-page {
+  background: var(--acai-page-bg, #{$bg-conteudo});
+  // 30px topo/base, 44px laterais — os DEFAULTS, inalterados.
+  // Expostos como custom property pra quem precisa de outro respiro (ex.: um
+  // site de documentação, que tem menos densidade que uma tela de sistema)
+  // ajustar sem sobrescrever a classe interna do componente:
+  //   body { --acai-page-padding-y: 50px }
+  padding: var(--acai-page-padding-y, 30px) var(--acai-page-padding-x, 44px);
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+
+    // Trilha à esquerda, "?" da ajuda encostado à direita. Quando a trilha está
+    // oculta (hide-breadcrumbs), o `auto` mantém o "?" no canto.
+    .container-trilha {
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+      // Sem o wrap, uma trilha longa ("Início › Controle de servidores ›
+      // Cadastrar servidor") espremia o gatilho "?" da ajuda até ele virar uma
+      // fatia inclicável. Com wrap ele desce pra linha de baixo inteiro.
+      flex-wrap: wrap;
+
+      .container-breadcrumbs {
+        flex: 1;
+        // Par obrigatório do wrap: sem `min-width: 0` um filho flex não encolhe
+        // além do próprio conteúdo, e a trilha empurraria a linha pra fora.
+        min-width: 0;
+      }
+
+      .acaihelp__gatilho {
+        margin-left: auto;
+      }
+    }
+
+    .container-breadcrumbs {
+      font-size: 0.875rem;
+      color: var(--acai-text, #{$color-gray-700});
+
+      // Rotas NÃO ativas (links clicáveis) — mira o <a> direto (router-link) pra
+      // vencer o active-color do Quasar. Cor forte + hover sublinhado = destaque
+      // claro de "é clicável". Navy no claro, quase-branco no escuro.
+      a,
+      a.q-breadcrumbs__el {
+        color: var(--acai-heading, #{$primary});
+        font-weight: 500;
+        transition: opacity 0.15s ease;
+
+        &:hover {
+          text-decoration: underline;
+          opacity: 0.82;
+        }
+      }
+
+      .q-breadcrumbs__separator {
+        color: var(--acai-text-muted, #{$color-gray-600});
+      }
+
+      // Página atual (último) — o mais forte, sem afordância de link.
+      .q-breadcrumbs__el:last-child {
+        font-weight: 700;
+        color: var(--acai-heading, #{$primary});
+      }
+    }
+
+    .doc-page__subtitle {
+      font-size: 0.9375rem;
+      color: var(--acai-text-muted, #{$color-gray-600});
+      line-height: 1.6;
+      margin: 0;
+    }
+
+    .container-header {
+      margin-bottom: $spacing-xl;
+
+      h1 {
+        text-transform: uppercase;
+        color: var(--acai-heading, #{$primary});
+        margin-bottom: $spacing-sm;
+      }
+    }
+  }
+}
+
+// Os 44px de lateral são respiro de desktop. Antes eles só caíam abaixo de
+// 599px, então toda a faixa de tablet (600–1023px) carregava padding de tela
+// grande — 88px dos ~768px iam embora só em margem. Agora a redução é em dois
+// degraus, acompanhando a escala de `_breakpoints.scss`.
+@include ate-tablet {
+  .container-page {
+    padding: var(--acai-page-padding-y, #{$spacing-lg}) var(--acai-page-padding-x, #{$spacing-lg});
+  }
+}
+
+@include ate-mobile {
+  .container-page {
+    padding: var(--acai-page-padding-y, #{$spacing-md}) var(--acai-page-padding-x, #{$spacing-md});
+  }
+}

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

@@ -0,0 +1,140 @@
+<template>
+  <q-page class="container-page">
+    <!-- eMAG 1.3: heading semântico para o título da página (sr-only — o título
+         visual aparece via último breadcrumb). Permite leitor de tela navegar
+         por estrutura de cabeçalhos. -->
+    <component :is="headingTag" class="container-heading-sr-only">{{ title }}</component>
+    <div class="container q-gutter-y-md">
+      <!-- Trilha + ajuda dividem a mesma linha; a linha só existe se houver
+           pelo menos um dos dois. -->
+      <div v-if="exibirTrilha || help" class="container-trilha">
+        <q-breadcrumbs
+          v-if="exibirTrilha"
+          class="container-breadcrumbs"
+          active-color="primary"
+          gutter="sm"
+        >
+          <template #separator>
+            <acai-ui-icon name="arrow_forward" size="md" />
+          </template>
+          <q-breadcrumbs-el
+            v-for="(item, indice) in breadcrumbsExibidos"
+            :key="indice"
+            :label="item.label"
+            :icon="item.icon"
+            :to="item.to"
+          />
+        </q-breadcrumbs>
+
+        <!-- Ajuda contextual: mora aqui porque é ajuda DESTA tela. Quem quiser
+             o "?" em outro lugar usa o <acai-ui-help> solto. -->
+        <acai-ui-help
+          v-if="help"
+          ref="helpRef"
+          :content="help"
+          :auto-start="helpAutoStart"
+          :hide-audio="helpHideAudio"
+          @open="emits('help-open')"
+          @tour-start="emits('tour-start')"
+          @tour-finish="emits('tour-finish')"
+          @tour-exit="emits('tour-exit')"
+          @tour-step="indice => emits('tour-step', indice)"
+          @tour-step-skipped="info => emits('tour-step-skipped', info)"
+        />
+      </div>
+
+      <slot />
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, type Ref } from 'vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import AcaiUiHelp from '../help/acai-ui-help.vue'
+import type { BreadcrumbItem } from './acai-ui-container-interface'
+import type { HelpContent, TourSkip } from '../help/acai-ui-help-interface'
+import { ACAI_UI_CONFIG } from '../../plugin'
+
+// Props definidas INLINE (em vez de `defineProps<ContainerProps>()`).
+// Vue SFC compiler não consegue resolver tipos importados de outro arquivo
+// quando o tipo da prop usa outro alias importado (ex.: HeadingLevel) —
+// resultado: prop não é registrada e o default do withDefaults não aplica.
+const props = withDefaults(
+  defineProps<{
+    title: string
+    breadcrumbs?: BreadcrumbItem[]
+    hideBreadcrumbs?: boolean
+    /** Nível de heading semântico para o título da página (eMAG 1.3). Default 1. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+    /**
+     * Conteúdo do "Ajuda" desta tela. Presente, renderiza o "?" ao
+     * lado da trilha. Ausente, nada muda.
+     */
+    help?: HelpContent
+    /** Abre o tour sozinho na primeira visita do usuário a esta tela. */
+    helpAutoStart?: boolean
+    /** Esconde os botões de ouvir da ajuda desta tela. */
+    helpHideAudio?: boolean
+  }>(),
+  {
+    hideBreadcrumbs: false,
+    headingLevel: 1,
+    helpAutoStart: false,
+    helpHideAudio: false,
+  },
+)
+
+const headingTag = computed(() => `h${props.headingLevel ?? 1}`)
+
+// Eventos da ajuda repassados um a um: o `<acai-ui-help>` não é a raiz do
+// componente, então o fallthrough de listeners cairia no `<q-page>` e o
+// consumidor nunca receberia nada.
+const emits = defineEmits<{
+  (e: 'help-open'): void
+  (e: 'tour-start'): void
+  (e: 'tour-finish'): void
+  (e: 'tour-exit'): void
+  (e: 'tour-step', indice: number): void
+  (e: 'tour-step-skipped', info: TourSkip): void
+}>()
+
+const helpRef = ref<InstanceType<typeof AcaiUiHelp> | null>(null)
+
+// Mesma razão dos emits: quem usa a prop `help` não instancia o tour e
+// precisa de um caminho até ele. No-op quando a página não tem ajuda.
+defineExpose({
+  abrirAjuda: (): void => helpRef.value?.abrirModal(),
+  iniciarTour: (): void => helpRef.value?.iniciarTour(),
+  proximo: (): void => helpRef.value?.proximo(),
+  anterior: (): void => helpRef.value?.anterior(),
+  irPara: (indice: number): void => helpRef.value?.irPara(indice),
+  sairTour: (): void => helpRef.value?.sairTour(),
+})
+
+// Config registrado via `app.use(AcaiUI, { useBreadcrumbs })`.
+const config = inject(ACAI_UI_CONFIG, null)
+
+// Se o consumidor configurou `useBreadcrumbs` no plugin, chama agora
+// passando o título da página. O retorno é um par reativo (`trilha`,
+// `exibirBreadcrumbs`) — o composable pode usar `route`, `Routes`, etc.
+const trilhaAutomatica = config?.useBreadcrumbs?.(props.title) ?? null
+
+const breadcrumbsExibidos = computed<BreadcrumbItem[]>(() => {
+  // Prop tem prioridade — permite override por página (rotas cruzadas,
+  // trilhas custom, sem precisar mexer no composable global).
+  if (props.breadcrumbs) return props.breadcrumbs
+  const trilha = (trilhaAutomatica?.trilha as Ref<BreadcrumbItem[]> | undefined)?.value
+  return trilha ?? []
+})
+
+const exibirTrilha = computed(
+  () => breadcrumbsExibidos.value.length > 0 && !props.hideBreadcrumbs,
+)
+
+onMounted(() => {
+  document.title = props.title
+})
+</script>
+
+<style lang="scss" src="./acai-ui-container-styles.scss" />

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

@@ -0,0 +1,18 @@
+export interface DateProps {
+  modelValue: string
+  label?: string
+  placeholder?: string
+  hint?: string
+  required?: boolean
+  disableFuture?: boolean
+  disablePast?: boolean
+  minDate?: string
+  maxDate?: string
+  disable?: boolean
+  readonly?: boolean
+  dense?: boolean
+  outlined?: boolean
+  filled?: boolean
+  color?: string
+  rules?: ((val: string) => boolean | string)[]
+}