acai-ui 1.65.5

package/src/plugin.ts

@@ -0,0 +1,134 @@
+import type { App, Component, InjectionKey, Ref } from 'vue'
+import type { BreadcrumbItem } from './components/container/acai-ui-container-interface'
+
+import AcaiUiConfirm from './components/confirm/acai-ui-confirm.vue'
+import AcaiUiFile from './components/file/acai-ui-file.vue'
+import AcaiUiModal from './components/modal/acai-ui-modal.vue'
+import AcaiUiBanner from './components/banner/acai-ui-banner.vue'
+import AcaiUiButton from './components/button/acai-ui-button.vue'
+import AcaiUiCard from './components/card/acai-ui-card.vue'
+import AcaiUiCheckbox from './components/checkbox/acai-ui-checkbox.vue'
+import AcaiUiCode from './components/code/acai-ui-code.vue'
+import AcaiUiChip from './components/chip/acai-ui-chip.vue'
+import AcaiUiContainer from './components/container/acai-ui-container.vue'
+import AcaiUiDate from './components/date/acai-ui-date.vue'
+import AcaiUiDatetime from './components/datetime/acai-ui-datetime.vue'
+import AcaiUiDialog from './components/dialog/acai-ui-dialog.vue'
+import AcaiUiDropdown from './components/dropdown/acai-ui-dropdown.vue'
+import AcaiUiDropdownItem from './components/dropdown/acai-ui-dropdown-item.vue'
+import AcaiUiForm from './components/form/acai-ui-form.vue'
+import AcaiUiHelp from './components/help/acai-ui-help.vue'
+import AcaiUiTour from './components/help/acai-ui-tour.vue'
+import { vAcaiTour } from './components/help/tour-registry'
+import AcaiUiTime from './components/time/acai-ui-time.vue'
+import AcaiUiIcon from './components/icon/acai-ui-icon.vue'
+import AcaiUiInput from './components/input/acai-ui-input.vue'
+import AcaiUiProgress from './components/progress/acai-ui-progress.vue'
+import AcaiUiDateRange from './components/date-range/acai-ui-date-range.vue'
+import AcaiUiRadio from './components/radio/acai-ui-radio.vue'
+import AcaiUiSection from './components/section/acai-ui-section.vue'
+import AcaiUiPreferences from './components/preferences/acai-ui-preferences.vue'
+import AcaiUiSelect from './components/select/acai-ui-select.vue'
+import AcaiUiUserMenu from './components/user-menu/acai-ui-user-menu.vue'
+import AcaiUiDivider from './components/divider/acai-ui-divider.vue'
+import AcaiUiStepper from './components/stepper/acai-ui-stepper.vue'
+import AcaiUiStep from './components/stepper/acai-ui-step.vue'
+import AcaiUiChart from './components/chart/acai-ui-chart.vue'
+import AcaiUiTable from './components/table/acai-ui-table.vue'
+import AcaiUiTabs from './components/tabs/acai-ui-tabs.vue'
+import AcaiUiTab from './components/tabs/acai-ui-tab.vue'
+import AcaiUiToggle from './components/toggle/acai-ui-toggle.vue'
+import AcaiUiTooltip from './components/tooltip/acai-ui-tooltip.vue'
+import AcaiUiValidation from './components/validation/acai-ui-validation.vue'
+import AcaiUiPagination from './components/pagination/acai-ui-pagination.vue'
+import AcaiUiSwagger from './components/swagger/acai-ui-swagger.vue'
+
+/**
+ * Resultado esperado de um composable de breadcrumbs registrado no plugin.
+ * O projeto consumidor implementa `useBreadcrumbs` e a lib invoca o
+ * composable dentro do setup do AcaiUiContainer.
+ */
+export interface BreadcrumbsResolverResult {
+  trilha: Ref<BreadcrumbItem[]> | { value: BreadcrumbItem[] }
+  exibirBreadcrumbs?: Ref<boolean> | { value: boolean }
+}
+
+export type BreadcrumbsResolver = (title: string) => BreadcrumbsResolverResult
+
+export interface AcaiUIOptions {
+  /**
+   * Composable que recebe o `title` da página atual e retorna a trilha
+   * de breadcrumbs. Registrado no setup global da aplicação, é invocado
+   * automaticamente pelo `<acai-ui-container>` quando o consumidor não
+   * passa `breadcrumbs` por prop.
+   *
+   * Exemplo:
+   *   import { useBreadcrumbs } from 'src/hooks/use-breadcrumbs'
+   *   app.use(AcaiUI, { useBreadcrumbs })
+   */
+  useBreadcrumbs?: BreadcrumbsResolver
+}
+
+export interface AcaiUIConfig {
+  useBreadcrumbs: BreadcrumbsResolver | null
+}
+
+// Symbol.for (registro GLOBAL) em vez de Symbol(): a lib shippa .vue cru e o
+// Vite do consumidor pode carregar plugin.ts em DUAS instâncias (pré-bundle do
+// import bare + source do .vue via condition `vue`). Com Symbol() local, cada
+// instância cria um símbolo diferente e o inject() do container não acha o
+// provide() do boot — breadcrumbs somem silenciosamente. Symbol.for garante a
+// MESMA chave em qualquer instância do módulo.
+export const ACAI_UI_CONFIG = Symbol.for('@acai-ui:config') as InjectionKey<AcaiUIConfig>
+
+export const AcaiUI = {
+  install(app: App, options: AcaiUIOptions = {}) {
+    app.provide(ACAI_UI_CONFIG, {
+      useBreadcrumbs: options.useBreadcrumbs ?? null,
+    })
+
+    app.component('acai-ui-confirm', AcaiUiConfirm)
+    app.component('acai-ui-file', AcaiUiFile)
+    app.component('acai-ui-modal', AcaiUiModal)
+    app.component('acai-ui-banner', AcaiUiBanner)
+    app.component('acai-ui-button', AcaiUiButton)
+    app.component('acai-ui-card', AcaiUiCard)
+    app.component('acai-ui-checkbox', AcaiUiCheckbox)
+    app.component('acai-ui-chip', AcaiUiChip)
+    app.component('acai-ui-container', AcaiUiContainer)
+    app.component('acai-ui-date', AcaiUiDate)
+    app.component('acai-ui-datetime', AcaiUiDatetime)
+    app.component('acai-ui-dialog', AcaiUiDialog)
+    app.component('acai-ui-dropdown', AcaiUiDropdown)
+    app.component('acai-ui-dropdown-item', AcaiUiDropdownItem)
+    app.component('acai-ui-form', AcaiUiForm)
+    app.component('acai-ui-help', AcaiUiHelp)
+    app.component('acai-ui-tour', AcaiUiTour)
+    app.component('acai-ui-time', AcaiUiTime)
+    app.component('acai-ui-icon', AcaiUiIcon)
+    app.component('acai-ui-input', AcaiUiInput)
+    app.component('acai-ui-progress', AcaiUiProgress)
+    app.component('acai-ui-date-range', AcaiUiDateRange)
+    app.component('acai-ui-radio', AcaiUiRadio)
+    app.component('acai-ui-section', AcaiUiSection)
+    app.component('acai-ui-preferences', AcaiUiPreferences)
+    app.component('acai-ui-select', AcaiUiSelect)
+    app.component('acai-ui-user-menu', AcaiUiUserMenu)
+    app.component('acai-ui-divider', AcaiUiDivider)
+    app.component('acai-ui-stepper', AcaiUiStepper)
+    app.component('acai-ui-step', AcaiUiStep)
+    app.component('acai-ui-chart', AcaiUiChart as Component)
+    app.component('acai-ui-table', AcaiUiTable as Component)
+    app.component('acai-ui-tabs', AcaiUiTabs)
+    app.component('acai-ui-tab', AcaiUiTab)
+    app.component('acai-ui-toggle', AcaiUiToggle)
+    app.component('acai-ui-tooltip', AcaiUiTooltip)
+    app.component('acai-ui-validation', AcaiUiValidation)
+    app.component('acai-ui-pagination', AcaiUiPagination)
+    app.component('acai-ui-code', AcaiUiCode)
+    app.component('acai-ui-swagger', AcaiUiSwagger)
+
+    // Marca os alvos do tour: `<acai-ui-input v-acai-tour="'cpf'" />`.
+    app.directive('acai-tour', vAcaiTour)
+  },
+}

package/src/scss/_badge.scss

@@ -0,0 +1,12 @@
+// Açaí UI — Badge global
+//
+// Estilo padrão para badges/etiquetas usadas em todos os componentes
+// (Tabela, Drawer, Chip de status, etc.). Alinhado com a paleta DETRAN-PA.
+//
+// Uso: aplicar a classe `.badge` em qualquer <q-badge>.
+
+.badge {
+  font-size: 0.875rem;
+  font-weight: bold;
+  padding: 0.5rem; // 8px em todos os lados
+}

package/src/scss/_breakpoints.scss

@@ -0,0 +1,102 @@
+// Açaí UI — Escala de breakpoints
+//
+// ÚNICA fonte de verdade pra "onde a lib muda de forma". Antes disto cada
+// componente inventava o próprio número — form 999/1299, modal 900, tabs 1600,
+// drawer 1080, swagger 620/1100 — e nada conversava entre si: o mesmo app
+// mudava de layout em cinco larguras diferentes conforme o componente.
+//
+// A escala é a MESMA do Quasar (`$q.screen`, classes `lt-*`/`gt-*`). Isso é o
+// que faz um `@include ate-tablet` aqui dentro e um `v-if="$q.screen.lt.md"` no
+// consumidor virarem na mesma largura, em vez de brigarem por 24px.
+//
+//   xs   <  600px    celular
+//   sm   >= 600px    celular grande / tablet retrato
+//   md   >= 1024px   tablet paisagem / laptop
+//   lg   >= 1440px   desktop
+//   xl   >= 1920px   desktop grande
+//
+// Uso (o @import é OBRIGATÓRIO — ver CLAUDE.md §6: consumidores via condition
+// `vue` compilam o source sem o additionalData da lib):
+//
+//   @import '../../scss/breakpoints';
+//
+//   .foo {
+//     padding: 24px;
+//     @include ate-mobile { padding: 8px; }
+//   }
+
+$bp-sm: 600px;
+$bp-md: 1024px;
+$bp-lg: 1440px;
+$bp-xl: 1920px;
+
+// O -0.02px existe pra não deixar "terra de ninguém": numa tela fracionária ou
+// com zoom do navegador a largura pode ser 599.5px, que não casaria nem com
+// `max-width: 599px` nem com `min-width: 600px` — e o elemento ficaria sem
+// nenhuma das duas regras. É a mesma técnica do Bootstrap.
+$bp-sm-max: $bp-sm - 0.02;
+$bp-md-max: $bp-md - 0.02;
+$bp-lg-max: $bp-lg - 0.02;
+
+// ========================================
+// "Deste tamanho pra baixo" — o caso comum (a lib nasceu desktop-first)
+// ========================================
+@mixin ate-mobile {
+  @media (max-width: $bp-sm-max) {
+    @content;
+  }
+}
+
+@mixin ate-tablet {
+  @media (max-width: $bp-md-max) {
+    @content;
+  }
+}
+
+@mixin ate-laptop {
+  @media (max-width: $bp-lg-max) {
+    @content;
+  }
+}
+
+// ========================================
+// "Deste tamanho pra cima"
+// ========================================
+@mixin de-tablet {
+  @media (min-width: $bp-sm) {
+    @content;
+  }
+}
+
+@mixin de-laptop {
+  @media (min-width: $bp-md) {
+    @content;
+  }
+}
+
+@mixin de-desktop {
+  @media (min-width: $bp-lg) {
+    @content;
+  }
+}
+
+// ========================================
+// Faixa fechada
+// ========================================
+@mixin so-tablet {
+  @media (min-width: $bp-sm) and (max-width: $bp-md-max) {
+    @content;
+  }
+}
+
+// ========================================
+// Ponteiro grosso (dedo) — NÃO é largura
+// ========================================
+// Alvo de toque de 44px (WCAG 2.5.5 / eMAG) é sobre COMO se aponta, não sobre
+// quanto cabe: um tablet de 1024px com touch precisa, um laptop de 1024px com
+// mouse não. Por isso mora numa media feature própria, e não num breakpoint.
+@mixin toque {
+  @media (pointer: coarse) {
+    @content;
+  }
+}

package/src/scss/_color-utilities.scss

@@ -0,0 +1,105 @@
+// Açaí UI — Color utility classes
+//
+// Gera `.bg-{token}` e `.text-{token}` para todos os tokens de cor da lib.
+// Permite usar qualquer cor da lib em <q-badge :color>, <q-chip>, classes inline, etc.
+//
+// IMPORTANTE: não gera para as 6 cores semânticas (primary/positive/negative/warning/info/accent)
+// porque o Quasar já gera essas classes via sassVariables (vite.config.ts).
+//
+// Uso:
+//   <q-badge color="color-primary-900" />   → aplica .bg-color-primary-900
+//   <q-badge class="bg-color-yellow-700 text-color-yellow-50" />
+//   <span class="text-color-red-600">erro</span>
+
+$color-tokens: (
+  // Primary scale
+  color-primary-25: $color-primary-25,
+  color-primary-50: $color-primary-50,
+  color-primary-100: $color-primary-100,
+  color-primary-200: $color-primary-200,
+  color-primary-300: $color-primary-300,
+  color-primary-400: $color-primary-400,
+  color-primary-500: $color-primary-500,
+  color-primary-600: $color-primary-600,
+  color-primary-700: $color-primary-700,
+  color-primary-800: $color-primary-800,
+  color-primary-900: $color-primary-900,
+
+  // Gray scale
+  color-gray-5: $color-gray-5,
+  color-gray-10: $color-gray-10,
+  color-gray-50: $color-gray-50,
+  color-gray-100: $color-gray-100,
+  color-gray-200: $color-gray-200,
+  color-gray-300: $color-gray-300,
+  color-gray-400: $color-gray-400,
+  color-gray-500: $color-gray-500,
+  color-gray-600: $color-gray-600,
+  color-gray-700: $color-gray-700,
+  color-gray-800: $color-gray-800,
+  color-gray-900: $color-gray-900,
+  color-gray-disabled-700: $color-gray-disabled-700,
+  color-white-100: $color-white-100,
+
+  // Red scale
+  color-red-50: $color-red-50,
+  color-red-100: $color-red-100,
+  color-red-200: $color-red-200,
+  color-red-300: $color-red-300,
+  color-red-400: $color-red-400,
+  color-red-500: $color-red-500,
+  color-red-600: $color-red-600,
+  color-red-700: $color-red-700,
+  color-red-800: $color-red-800,
+  color-red-900: $color-red-900,
+
+  // Yellow scale
+  color-yellow-50: $color-yellow-50,
+  color-yellow-100: $color-yellow-100,
+  color-yellow-200: $color-yellow-200,
+  color-yellow-300: $color-yellow-300,
+  color-yellow-400: $color-yellow-400,
+  color-yellow-500: $color-yellow-500,
+  color-yellow-600: $color-yellow-600,
+  color-yellow-700: $color-yellow-700,
+  color-yellow-800: $color-yellow-800,
+  color-yellow-900: $color-yellow-900,
+
+  // Green scale
+  color-green-50: $color-green-50,
+  color-green-100: $color-green-100,
+  color-green-200: $color-green-200,
+  color-green-300: $color-green-300,
+  color-green-400: $color-green-400,
+  color-green-500: $color-green-500,
+  color-green-600: $color-green-600,
+  color-green-700: $color-green-700,
+  color-green-800: $color-green-800,
+  color-green-900: $color-green-900,
+
+  // Blue scale
+  color-blue-50: $color-blue-50,
+  color-blue-100: $color-blue-100,
+  color-blue-200: $color-blue-200,
+  color-blue-300: $color-blue-300,
+  color-blue-400: $color-blue-400,
+  color-blue-500: $color-blue-500,
+  color-blue-600: $color-blue-600,
+  color-blue-700: $color-blue-700,
+  color-blue-800: $color-blue-800,
+  color-blue-900: $color-blue-900,
+
+  // Dark
+  dark-page: $dark-page,
+);
+
+@each $name, $color in $color-tokens {
+  .bg-#{$name} {
+    background-color: $color !important;
+    color: white;
+  }
+
+  .text-#{$name} {
+    color: $color !important;
+  }
+}

package/src/scss/_controls.scss

@@ -0,0 +1,135 @@
+// Açaí UI — Tokens de "controles" (botão, dropdown, etc.)
+//
+// Centraliza padding/min-height/font-size dos elementos clicáveis tipo botão.
+// Mudou aqui → muda em todos os componentes que herdam (Button, Dropdown, ...).
+//
+// Uso:
+//   @include control-base;          // reset comum + reset Quasar + alvo de toque
+//   @include control-md;             // tamanho médio
+//   @include control-icon-only-md;   // botão só com ícone, md
+
+@import 'breakpoints';
+
+// ========================================
+// Alvo de toque (WCAG 2.5.5 / eMAG)
+// ========================================
+//
+// A recomendação pede 44×44 e mede o ALVO, não o desenho. Estes controles saem
+// bem abaixo disso — `control-md` dá ~28px de altura, `control-icon-only-sm` dá
+// 32px — mas simplesmente esticá-los pra 44 engordaria toda a interface no
+// desktop, onde 28px com mouse é confortável e correto.
+//
+// Então a área clicável cresce numa camada invisível e o desenho fica igual.
+//
+// `::after` e NÃO `::before`: o Quasar já usa `.q-btn:before` pra sombra do
+// botão (conferido no `quasar.css`) — sobrescrever apagaria a elevação. O
+// `:after` está livre (zero ocorrências no CSS do Quasar).
+//
+// Só sob `pointer: coarse`: é sobre COMO se aponta, não sobre quanto cabe. Um
+// tablet de 1024px com dedo precisa; um laptop de 1024px com mouse não. Por
+// isso não é breakpoint de largura.
+//
+// A caixa é centrada e usa `min-width/min-height`, então acompanha um controle
+// que já seja maior que 44 em vez de encolhê-lo.
+@mixin alvo-toque($minimo: 44px) {
+  @include toque {
+    // `.q-btn` já é `position: relative` (base do Quasar), mas quem incluir
+    // isto num elemento solto precisa da âncora — daí a garantia explícita.
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: $minimo;
+      min-height: $minimo;
+    }
+  }
+}
+
+// ========================================
+// Base — reset Quasar + tipografia comum
+// ========================================
+@mixin control-base {
+  border-radius: $radius-lg;
+  font-weight: 600;
+  font-family: inherit;
+  line-height: 1;
+  border: 2px solid transparent;
+  transition: all 0.2s ease;
+  box-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+
+  // Todo controle que passa por aqui ganha o alvo de 44px no toque. Fica na
+  // base, e não em cada tamanho, porque a regra vale pros três igualmente.
+  @include alvo-toque;
+}
+
+// ========================================
+// Tamanhos
+// !important necessário para vencer regras default do Quasar (.q-btn / .q-btn-dropdown).
+// ========================================
+//
+// 🔴 ALTURA FIXA POR TAMANHO — e não altura pelo conteúdo.
+//
+// Os componentes zeram o `min-height` do Quasar (`min-height: unset`), então a
+// altura passava a sair do conteúdo. E o ícone é mais alto que a linha de texto:
+// 24px contra os 14px de um rótulo `md`. Resultado medido no navegador:
+//
+//     md sem ícone   32px          md com ícone   42px
+//     sm sem ícone   28px          lg sem ícone   44px
+//
+// Ou seja, dois botões lado a lado na mesma linha — "Ações" e "Pesquisar" —
+// saíam com 6 a 10px de diferença de altura, só porque um tinha ícone. Numa
+// barra de ações isso lê como desalinhamento, não como variação de tamanho.
+//
+// O piso é a altura COM ícone, que é a maior: assim pôr ou tirar um ícone não
+// mexe na caixa, e o default já nasce no tamanho certo sem o dev configurar
+// nada. A conta é `ícone (24) + padding vertical + borda (2+2)`.
+$control-altura-sm: 40px; // 24 + 6+6 + 4
+$control-altura-md: 42px; // 24 + 7+7 + 4
+$control-altura-lg: 52px; // 24 + 12+12 + 4
+
+@mixin control-sm {
+  padding: 6px 12px !important;
+  font-size: 0.75rem;
+  min-height: $control-altura-sm !important;
+}
+
+@mixin control-md {
+  padding: 7px 15px !important;
+  font-size: 0.875rem;
+  min-height: $control-altura-md !important;
+}
+
+@mixin control-lg {
+  padding: 12px 24px !important;
+  font-size: 1rem;
+  min-height: $control-altura-lg !important;
+}
+
+// ========================================
+// Variantes icon-only (quadrado, sem padding horizontal extra)
+// ========================================
+// Quadrados de verdade: a largura mínima passa a ser a MESMA altura do tamanho
+// correspondente. Antes eram 32/36/44 contra alturas de 40/42/52 — o botão só
+// de ícone saía retangular e mais baixo que o vizinho com rótulo.
+@mixin control-icon-only-sm {
+  padding: 6px !important;
+  min-width: $control-altura-sm;
+}
+
+@mixin control-icon-only-md {
+  padding: 7px !important;
+  min-width: $control-altura-md;
+}
+
+@mixin control-icon-only-lg {
+  padding: 12px !important;
+  min-width: $control-altura-lg;
+}