acai-ui 1.65.5

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

@@ -0,0 +1,203 @@
+<template>
+  <q-input
+    v-model="inputValue"
+    :rules="regrasCompostas"
+    :label="label"
+    :filled="filled"
+    :readonly="readonly"
+    :outlined="outlined"
+    :disable="disable"
+    :color="color"
+    class="ds-input"
+    :mask="Masks.dataHora"
+    bottom-slots
+    no-error-icon
+  >
+    <template #label>
+      {{ label }}
+      <span v-if="required" class="text-red-10 text-weight-bolder">*</span>
+    </template>
+    <template #append>
+      <acai-ui-icon
+        name="calendar_month"
+        class="cursor-pointer"
+        color="primary"
+      >
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <div class="ds-picker-m3">
+            <div class="ds-picker-m3__header">
+              <span class="ds-picker-m3__title">Selecione data e hora</span>
+              <q-btn
+                v-close-popup
+                class="ds-picker-m3__close"
+                icon="close"
+                flat
+                dense
+                round
+                size="sm"
+              />
+            </div>
+            <div class="dh-conteudo">
+              <q-date
+                v-model="inputValue"
+                mask="DD/MM/YYYY HH:mm"
+                flat
+                minimal
+              />
+              <q-time
+                v-model="inputValue"
+                mask="DD/MM/YYYY HH:mm"
+                format24h
+                flat
+              />
+            </div>
+            <div class="ds-picker-m3__footer">
+              <q-btn v-close-popup label="OK" color="primary" flat no-caps />
+            </div>
+          </div>
+        </q-popup-proxy>
+      </acai-ui-icon>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import type { DatetimeProps } from "./acai-ui-datetime-interface";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+import FormRules from "../../utils/form-rules";
+import Masks from "../../utils/masks";
+import {
+  dateIndianToISO,
+  dateISOToIndian,
+  horaValida,
+  parseDataIndian,
+} from "../../utils/date-utils";
+
+const props = withDefaults(defineProps<DatetimeProps>(), {
+  mask: "date",
+  rules: () => [],
+  filled: true,
+  color: "primary",
+});
+
+const realValue = defineModel<string>({ required: true });
+
+const regrasCompostas = computed(() => {
+  const regras = [...props.rules];
+  if (props.required) {
+    regras.unshift(FormRules.campoObrigatorio);
+  }
+  // Data inexistente e hora impossível (99:99) são sempre erro — a máscara
+  // ##/##/#### ##:## só garante a forma.
+  regras.push(FormRules.validarDataHoraValida());
+  return regras;
+});
+
+const _inputValue = ref<string>("");
+
+// Sincroniza o campo (display DD/MM/YYYY HH:mm) quando o model ISO muda por fora —
+// ex.: telas de EDIÇÃO que populam o valor async depois do mount. Sem isto o campo
+// só era lido no mount e ficava vazio na edição. (O acai-ui-date já tinha este watch.)
+watch(
+  () => realValue.value,
+  (val) => {
+    if (!val) {
+      // Não apaga o que o usuário está digitando: enquanto a data/hora for
+      // inválida o setter zera o model, e limpar aqui esvaziaria o campo sozinho.
+      const [rascunhoData = "", rascunhoHora = ""] = _inputValue.value.split(" ");
+      const rascunhoValido =
+        parseDataIndian(rascunhoData) && (!rascunhoHora || horaValida(rascunhoHora));
+      if (!_inputValue.value || rascunhoValido) _inputValue.value = "";
+      return;
+    }
+    const [datePart, timePart] = val.split("T");
+    const indian = dateISOToIndian(datePart ?? "");
+    const horaMinuto = (timePart ?? "").slice(0, 5); // HH:mm (descarta segundos/tz)
+    _inputValue.value = horaMinuto ? `${indian} ${horaMinuto}` : indian;
+  },
+  { immediate: true },
+);
+
+const inputValue = computed({
+  get() {
+    return _inputValue.value;
+  },
+  set(val) {
+    _inputValue.value = val;
+    if (!val) {
+      realValue.value = "";
+      return;
+    }
+    const [datePart = "", timePart = ""] = val.split(" ");
+    // Só publica no model quando data E hora existem de verdade. Antes o split
+    // era cru: "31/02/2026 99:99" virava "2026-02-31T99:99" no model.
+    if (!parseDataIndian(datePart) || (timePart && !horaValida(timePart))) {
+      realValue.value = "";
+      return;
+    }
+    const iso = dateIndianToISO(datePart);
+    realValue.value = timePart ? `${iso}T${timePart}` : iso;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "../../scss/ds-input-base";
+@import "../../scss/ds-picker-m3";
+@import "../../scss/breakpoints";
+
+.dh-conteudo {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+
+  :deep(.q-date),
+  :deep(.q-time) {
+    flex: 1 1 50%;
+    border-radius: 0;
+  }
+
+  // Calendário e relógio lado a lado, cada um com metade da largura: num
+  // celular de 360px isso dá ~180px para uma grade de 7 colunas de dias — os
+  // números encavalam e o alvo de toque cai bem abaixo do utilizável. Ambos
+  // têm largura mínima própria, então sem isto o popup vaza a tela em vez de
+  // encolher. Empilhados, cada um fica na largura cheia.
+  @include ate-mobile {
+    flex-direction: column;
+    align-items: center;
+    // O miolo é quem rola se ainda assim não couber (a moldura é coluna flex
+    // em `_ds-picker-m3.scss`). Sem isto o excedente era decepado pelo
+    // `overflow: hidden` da moldura, sem rolagem e sem aviso.
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+
+    :deep(.q-date) {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+
+    // 🔴 O RELÓGIO É QUADRADO: o QTime resolve a altura pela largura (medido:
+    // 317x317). Empilhado, ele saía com os mesmos ~317px de altura e o conjunto
+    // não cabia — num aparelho de 667px sobravam 525px para o miolo, o
+    // calendário levava 296 e o relógio era cortado nos últimos 38.
+    //
+    // Limitar a LARGURA encolhe a altura junto, na mesma proporção. O
+    // `min-width: 0` é obrigatório: o Quasar impõe `min-width: 290px` no
+    // `.q-time` e sem zerar isso o `max-width` não tem efeito nenhum.
+    //
+    // 220px sai de conta, não de gosto: numa tela de 667px o miolo recebe
+    // 522px úteis (o que sobra entre cabeçalho e rodapé) e o calendário leva
+    // 296 — restam 226 para o relógio. Com 240 faltavam 14px e o conjunto
+    // ainda pedia rolagem; com 220 fecha com folga e o mostrador continua com
+    // alvo de toque confortável nos números.
+    :deep(.q-time) {
+      flex: 0 0 auto;
+      width: 100%;
+      min-width: 0;
+      max-width: 220px;
+    }
+  }
+}
+</style>

package/src/components/datetime/data-hora-styles.scss

@@ -0,0 +1,18 @@
+.dh-card {
+  max-width: 640px;
+  width: 100%;
+  overflow: hidden;
+
+  .dh-conteudo {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .dh-date,
+  .dh-time {
+    flex: 1 1 50%;
+    border-radius: 0;
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+export type DialogColor = 'primary' | 'negative' | 'positive'
+
+export interface DialogProps {
+  modelValue?: boolean
+  title: string
+  width?: number
+  icon?: MaterialIconValues
+  color?: DialogColor
+  persistent?: boolean
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmIcon?: MaterialIconValues
+  cancelIcon?: MaterialIconValues
+  hideCancel?: boolean
+  hideConfirm?: boolean
+}

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

@@ -0,0 +1,168 @@
+<template>
+  <q-dialog
+    :model-value="modelValue ?? null"
+    :persistent="persistent ?? false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <q-card class="ds-dialog" :class="`ds-dialog--${color}`" :style="{ width: `${width ?? 500}px`, maxWidth: '95vw' }">
+      <q-card-section class="ds-dialog__header">
+        <div class="ds-dialog__title-row">
+          <acai-ui-icon v-if="icon" :name="icon" class="ds-dialog__icon" />
+          <span class="ds-dialog__title">{{ title }}</span>
+        </div>
+        <q-btn
+          flat
+          round
+          dense
+          icon="close"
+          class="ds-dialog__close"
+          @click="fechar('cancel')"
+        />
+      </q-card-section>
+
+      <q-card-section class="ds-dialog__body">
+        <slot />
+      </q-card-section>
+
+      <q-card-actions
+        v-if="!hideCancel || !hideConfirm"
+        class="ds-dialog__actions"
+        align="right"
+      >
+        <acai-ui-button
+          v-if="!hideCancel"
+          outline
+          :label="cancelLabel"
+          v-bind="{
+            ...(cancelIcon ? { icon: cancelIcon } : {}),
+            ...(color ? { color } : {}),
+          }"
+          @click="fechar('cancel')"
+        />
+        <acai-ui-button
+          v-if="!hideConfirm"
+          :label="confirmLabel"
+          v-bind="{
+            ...(confirmIcon ? { icon: confirmIcon } : {}),
+            ...(color ? { color } : {}),
+          }"
+          @click="fechar('confirm')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { DialogProps } from './acai-ui-dialog-interface'
+import AcaiUiButton from '../button/acai-ui-button.vue'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+withDefaults(defineProps<DialogProps>(), {
+  color: 'primary',
+  persistent: false,
+  width: 500,
+  confirmLabel: 'Confirmar',
+  cancelLabel: 'Cancelar',
+  hideCancel: false,
+  hideConfirm: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  confirm: []
+  cancel: []
+}>()
+
+function fechar(tipo: 'confirm' | 'cancel') {
+  if (tipo === 'confirm') emit('confirm')
+  else emit('cancel')
+  emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.ds-dialog {
+  border-radius: $radius-xl;
+  box-shadow: $shadow-2xl;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // Linha do título à esquerda, botão de fechar à direita. O fechar não
+    // encolhe; sem wrap é o título que perde espaço até cortar.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 16px 20px 8px;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__icon {
+    font-size: 1.25rem;
+  }
+
+  &__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--acai-heading, #{$color-gray-900});
+  }
+
+  &__close {
+    color: var(--acai-text-muted, #{$color-gray-600});
+  }
+
+  &__body {
+    padding: 8px 20px 16px;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--acai-text, #{$color-gray-700});
+  }
+
+  &__actions {
+    padding: 8px 20px 16px;
+    gap: 8px;
+  }
+
+  // Color variants - icon color
+  &--primary {
+    .ds-dialog__icon {
+      // No claro o card é branco e o ícone navy; no dark o card vira navy
+      // (#171f2e) e o navy fixo sumiria. --acai-heading é $primary no claro
+      // (idêntico) e clareia no escuro, acompanhando o título.
+      color: var(--acai-heading, #{$primary});
+    }
+  }
+
+  &--negative {
+    .ds-dialog__icon {
+      color: var(--acai-negative, #{$negative});
+    }
+
+    .ds-dialog__title {
+      color: var(--acai-negative, #{$negative});
+    }
+  }
+
+  &--positive {
+    // `--acai-positive` e não `--q-positive`: aqui a cor é TINTA sobre a
+    // superfície do dialog. No escuro o verde base dá 4,35:1 e falha o eMAG 4.1
+    // — o token clareia sozinho. Espelha o que o `--negative` acima já faz.
+    .ds-dialog__icon {
+      color: var(--acai-positive, #{$positive});
+    }
+
+    .ds-dialog__title {
+      color: var(--acai-positive, #{$positive});
+    }
+  }
+}
+
+// (O clareamento no dark saiu daqui: agora vem do token `--acai-negative`,
+// definido em `_themes.scss` e compartilhado com input/button/error-log.)
+</style>

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

@@ -0,0 +1,4 @@
+export interface DividerProps {
+  title: string
+  textPosition?: 'center' | 'left' | 'right'
+}

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

@@ -0,0 +1,42 @@
+.acai-ui-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.acai-ui-divider__line {
+  flex: 1;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.14);
+}
+
+.acai-ui-divider--left .acai-ui-divider__line--start {
+  display: none;
+}
+
+.acai-ui-divider--right .acai-ui-divider__line--end {
+  display: none;
+}
+
+.acai-ui-divider--left .acai-ui-divider__title {
+  text-align: left;
+}
+
+.acai-ui-divider--right .acai-ui-divider__title {
+  text-align: right;
+}
+
+.acai-ui-divider__title {
+  padding: 6px 14px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-align: center;
+}
+
+.body--dark .acai-ui-divider__line {
+  background: rgba(255, 255, 255, 0.24);
+}
+
+.body--dark .acai-ui-divider__title {
+  background: rgba(255, 255, 255, 0.1);
+}

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

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="acai-ui-divider q-mt-lg q-mb-md"
+    :class="`acai-ui-divider--${props.textPosition}`"
+  >
+    <div class="acai-ui-divider__line acai-ui-divider__line--start"></div>
+    <div class="acai-ui-divider__title">{{ props.title }}</div>
+    <div class="acai-ui-divider__line acai-ui-divider__line--end"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DividerProps } from './acai-ui-divider-interface'
+
+const props = withDefaults(defineProps<DividerProps>(), {
+  textPosition: 'center',
+})
+</script>
+
+<style src="./acai-ui-divider-styles.scss" />

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

@@ -0,0 +1,99 @@
+import type { MaterialIconValues } from '../../constants/lista-icons'
+
+export type SidebarBadgeKey = string
+
+export interface SidebarConfig {
+  label: string
+  caption?: string
+  icon?: MaterialIconValues
+  iconColor?: string
+  profiles?: readonly string[]
+  hideForProfiles?: readonly string[]
+  hideWhenAuthenticated?: boolean
+  badgeKey?: SidebarBadgeKey
+  href?: string
+  download?: boolean
+  filename?: string
+  target?: '_blank' | '_self'
+  minWeight?: number
+  maxWeight?: number
+}
+
+export type SidebarRouteConfig =
+  | (SidebarConfig & {
+      name: string
+      badge?: number | string
+    })
+  | (SidebarConfig & {
+      expansionName: string
+      iconExpansion?: MaterialIconValues
+      children: SidebarRouteConfig[]
+      /**
+       * Por padrão, grupo com 1 único filho é "achatado" (a folha sobe pro
+       * nível do grupo, herdando o ícone). Use `keepExpansion: true` pra
+       * manter o expansion item mesmo com filho único (ex: menus que vão
+       * crescer, como "Desenvolvedor").
+       */
+      keepExpansion?: boolean
+    })
+
+export type SidebarGroup = Extract<SidebarRouteConfig, { children: SidebarRouteConfig[] }>
+export type SidebarLeaf = Extract<SidebarRouteConfig, { name: string }>
+
+export interface DrawerProps {
+  items: SidebarRouteConfig[]
+  /**
+   * Identificador do item ativo (geralmente `String(route.name)` quando se
+   * usa vue-router). O drawer não conhece vue-router: o consumidor
+   * informa qual está ativo.
+   */
+  activeKey?: string
+  /** Largura do drawer em px (default 320). */
+  width?: number
+  /**
+   * Breakpoint (px) até o qual o drawer entra em modo mobile (gaveta sobreposta
+   * com backdrop). Acima dele, fica persistente empurrando o conteúdo.
+   *
+   * Default **1024** — o `md` da escala (`scss/_breakpoints.scss`), o mesmo do
+   * `$q.screen` e das classes `lt-md`/`gt-sm` do Quasar. Era 1080, número solto
+   * que não batia com nada: um app com `@media (max-width: 1023.98px)` no
+   * próprio CSS tinha uma faixa de 56px em que o layout já era de tablet mas o
+   * drawer ainda se comportava como desktop.
+   */
+  breakpoint?: number
+  /**
+   * Largura (px) até a qual o menu deixa de ser gaveta lateral e vira **folha**:
+   * sobe de baixo e ocupa a tela inteira, com cabeçalho fixo próprio.
+   *
+   * Default **600** — o `$bp-sm` de `scss/_breakpoints.scss`, mesmo ponto do
+   * mixin `ate-mobile` e da classe `lt-sm` do Quasar. Um `@media (max-width:
+   * 599.98px)` no CSS do app e a folha do menu viram na mesma largura.
+   *
+   * Numa tela desse tamanho uma gaveta lateral nunca compensa: ou come a tela
+   * toda mesmo assim, ou sobra uma faixa de backdrop inútil. Entre 600 e 1023px
+   * segue a gaveta lateral.
+   */
+  sheetBreakpoint?: number
+  /**
+   * Mostra o atalho de preferências no cabeçalho da folha, que troca a vista
+   * entre o menu e o painel do `<acai-ui-preferences>` — sem abrir um segundo
+   * painel por cima do primeiro. Default `true`.
+   *
+   * Só tem efeito na folha (abaixo de `sheetBreakpoint`). Desligue se o app não
+   * usa preferências.
+   */
+  preferences?: boolean
+  version?: string
+  /**
+   * Largura (px) do trilho quando recolhido (`v-model:mini`). Default 72.
+   * No modo mini o drawer não some: vira uma coluna só de ícones, com o rótulo
+   * em tooltip. Grupos, ao serem clicados, reexpandem o drawer.
+   */
+  miniWidth?: number
+  /**
+   * Renderiza o botão de recolher/expandir no rodapé do drawer. Default false
+   * (retrocompatível: quem não pediu não ganha um botão novo do nada).
+   * Só faz sentido junto de `v-model:mini`.
+   */
+  collapsible?: boolean
+}