acai-ui 1.65.5

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

@@ -0,0 +1,191 @@
+<template>
+  <q-input
+    v-model="inputValue"
+    :mask="Masks.data"
+    :rules="regrasCompostas"
+    :label="label"
+    :placeholder="placeholder"
+    :hint="hint"
+    :filled="filled"
+    :outlined="outlined"
+    :readonly="readonly"
+    :disable="disable"
+    :dense="dense"
+    :color="color"
+    class="ds-input"
+    bottom-slots
+    no-error-icon
+  >
+    <template v-if="required" #label>
+      {{ label }}
+      <span class="text-red-10 text-weight-bolder"> * </span>
+    </template>
+    <template #append>
+      <acai-ui-icon name="event" class="cursor-pointer" :color="color">
+        <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 uma data</span>
+              <q-btn
+                v-close-popup
+                class="ds-picker-m3__close"
+                icon="close"
+                flat
+                dense
+                round
+                size="sm"
+              />
+            </div>
+            <q-date
+              v-model="inputValue"
+              mask="DD/MM/YYYY"
+              :options="opcoesDatas"
+              flat
+              minimal
+            />
+            <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 { DateProps } from "./acai-ui-date-interface";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+import Masks from "../../utils/masks";
+import FormRules from "../../utils/form-rules";
+import {
+  dateIndianToISO,
+  dateISOToIndian,
+  parseDataIndian,
+} from "../../utils/date-utils";
+
+const props = withDefaults(defineProps<DateProps>(), {
+  filled: true,
+  color: "primary",
+  rules: () => [],
+});
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const realValue = defineModel<string>();
+const _inputValue = ref("");
+
+const opcoesDatas = computed(() => {
+  if (
+    !props.disableFuture &&
+    !props.disablePast &&
+    !props.minDate &&
+    !props.maxDate
+  )
+    return undefined;
+
+  const hoje = new Date();
+  const hojeStr = `${hoje.getFullYear()}/${String(hoje.getMonth() + 1).padStart(2, "0")}/${String(hoje.getDate()).padStart(2, "0")}`;
+  const minimaStr = props.minDate?.replace(/-/g, "/");
+  const maximaStr = props.maxDate?.replace(/-/g, "/");
+
+  return (date: string) => {
+    if (props.disableFuture && date > hojeStr) return false;
+    if (props.disablePast && date < hojeStr) return false;
+    if (minimaStr && date < minimaStr) return false;
+    if (maximaStr && date > maximaStr) return false;
+    return true;
+  };
+});
+
+const regrasCompostas = computed(() => {
+  const regras = [...props.rules];
+  if (props.required) regras.unshift(FormRules.campoObrigatorio);
+  // Data que não existe no calendário (31/02/2026, mês 32, ano 0000) é SEMPRE
+  // erro — a máscara só garante o formato ##/##/####, não a existência.
+  regras.push(FormRules.validarDataValida());
+  if (props.disableFuture) {
+    regras.push((val: string) => {
+      const data = parseDataIndian(val);
+      if (!data) return true; // vazia/inválida: validarDataValida já reporta
+      const hoje = new Date();
+      hoje.setHours(0, 0, 0, 0);
+      return data <= hoje || "A data não pode ser posterior à data atual.";
+    });
+  }
+  if (props.disablePast) {
+    regras.push((val: string) => {
+      const data = parseDataIndian(val);
+      if (!data) return true;
+      const hoje = new Date();
+      hoje.setHours(0, 0, 0, 0);
+      return data >= hoje || "A data não pode ser anterior à data atual.";
+    });
+  }
+  if (props.minDate) {
+    const minISO = props.minDate;
+    regras.push((val: string) => {
+      if (!parseDataIndian(val)) return true;
+      return (
+        dateIndianToISO(val) >= minISO ||
+        `A data não pode ser anterior a ${dateISOToIndian(minISO)}.`
+      );
+    });
+  }
+  if (props.maxDate) {
+    const maxISO = props.maxDate;
+    regras.push((val: string) => {
+      if (!parseDataIndian(val)) return true;
+      return (
+        dateIndianToISO(val) <= maxISO ||
+        `A data não pode ser posterior a ${dateISOToIndian(maxISO)}.`
+      );
+    });
+  }
+  return regras;
+});
+
+watch(
+  () => realValue.value,
+  (val) => {
+    if (!val) {
+      // Model vazio pode significar "o usuário está digitando algo inválido"
+      // (o setter abaixo limpa o model nesse caso). Só apaga o display se ele
+      // não for um rascunho — senão o campo se limparia sozinho ao digitar.
+      if (!_inputValue.value || parseDataIndian(_inputValue.value)) {
+        _inputValue.value = "";
+      }
+      return;
+    }
+    _inputValue.value = dateISOToIndian(val);
+  },
+  { immediate: true },
+);
+
+const inputValue = computed({
+  get: () => _inputValue.value,
+  set: (val) => {
+    _inputValue.value = val;
+    if (!val) {
+      realValue.value = "";
+      return;
+    }
+    // Enquanto a data não estiver completa E existir, o model fica vazio: antes
+    // 31/02/2026 era publicado como "2026-02-31" e seguia corrompido pro backend.
+    if (!parseDataIndian(val)) {
+      realValue.value = "";
+      return;
+    }
+    realValue.value = dateIndianToISO(val);
+    emit("change", realValue.value ?? "");
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/ds-input-base";
+@import "../../scss/ds-picker-m3";
+</style>

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

@@ -0,0 +1,27 @@
+export type DateRangeValue = {
+  from: string
+  to: string
+} | null
+
+export interface DateRangeProps {
+  modelValue: DateRangeValue
+  label?: string
+  placeholder?: string
+  hint?: string
+  required?: boolean
+  disableFuture?: boolean
+  disablePast?: boolean
+  /** Máximo de dias que o período pode ter (validação). */
+  maxDays?: number
+  /** Mínimo de dias que o período deve ter (validação). */
+  minDays?: number
+  blockedRanges?: DateRangeValue[]
+  disable?: boolean
+  readonly?: boolean
+  dense?: boolean
+  outlined?: boolean
+  filled?: boolean
+  color?: string
+  errorMessage?: string
+  rules?: ((val: string) => boolean | string)[]
+}

package/src/components/date-range/acai-ui-date-range.vue

@@ -0,0 +1,300 @@
+<template>
+  <q-input
+    v-model="inputString"
+    mask="##/##/#### - ##/##/####"
+    :rules="regrasCompostas"
+    :error-message="errorMessage"
+    :label="label"
+    :placeholder="placeholder"
+    :hint="hint"
+    :filled="filled"
+    :outlined="outlined"
+    :readonly="readonly"
+    :disable="disable"
+    :dense="dense"
+    :color="color"
+    class="ds-input"
+    bottom-slots
+    no-error-icon
+  >
+    <template v-if="required" #label>
+      {{ label }}
+      <span class="text-red-10 text-weight-bolder"> * </span>
+    </template>
+    <template #append>
+      <acai-ui-icon name="date_range" class="cursor-pointer" :color="color">
+        <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 o período</span>
+              <q-btn
+                v-close-popup
+                class="ds-picker-m3__close"
+                icon="close"
+                flat
+                dense
+                round
+                size="sm"
+              />
+            </div>
+            <div class="ds-picker-m3__resumo">
+              {{ resumoRange }}
+            </div>
+            <q-date
+              v-model="qRange"
+              mask="DD/MM/YYYY"
+              range
+              :options="opcoesDatas"
+              flat
+              minimal
+              @range-start="onRangeStart"
+              @range-end="onRangeEnd"
+            />
+            <div v-if="maxDays" class="ds-picker-m3__limite">
+              Limite: {{ maxDays }} dias
+            </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 {
+  DateRangeProps,
+  DateRangeValue,
+} from "./acai-ui-date-range-interface";
+import AcaiUiIcon from "../icon/acai-ui-icon.vue";
+import FormRules from "../../utils/form-rules";
+import { parseDataIndian } from "../../utils/date-utils";
+
+type QPeriod = { from: string; to: string } | null;
+
+const props = withDefaults(defineProps<DateRangeProps>(), {
+  filled: true,
+  color: "primary",
+  rules: () => [],
+});
+
+const emit = defineEmits<{
+  change: [value: DateRangeValue];
+}>();
+
+const modelPeriodo = defineModel<DateRangeValue>();
+
+const qRange = computed<QPeriod>({
+  get() {
+    const m = modelPeriodo.value;
+    if (!m || !m.from || !m.to) return null;
+    return { from: m.from, to: m.to };
+  },
+  set(v) {
+    if (!v || !v.from || !v.to) {
+      modelPeriodo.value = null;
+      return;
+    }
+    modelPeriodo.value = { from: v.from, to: v.to };
+    emit("change", modelPeriodo.value);
+  },
+});
+
+// Rascunho do texto digitado. Diferente dos outros componentes de data, aqui o
+// v-model do input é DERIVADO do model ({from,to}) — e o Quasar valida
+// `props.modelValue`, não o texto digitado. Sem o rascunho, um período com data
+// inexistente zeraria o model, o getter voltaria "" e a rule receberia string
+// vazia: o campo se apagava sozinho e o erro virava "campo obrigatório".
+const _rascunho = ref<string | null>(null);
+
+const inputString = computed<string>({
+  get() {
+    if (_rascunho.value !== null) return _rascunho.value;
+    const m = modelPeriodo.value;
+    if (!m || !m.from || !m.to) return "";
+    return `${m.from} - ${m.to}`;
+  },
+  set(v) {
+    if (!v.trim()) {
+      _rascunho.value = null;
+      modelPeriodo.value = null;
+      return;
+    }
+    if (!/^\d{2}\/\d{2}\/\d{4} - \d{2}\/\d{2}\/\d{4}$/.test(v.trim())) {
+      _rascunho.value = v; // período pela metade: segura o que já foi digitado
+      return;
+    }
+    const partes = v.split("-");
+    const from = (partes[0] ?? "").trim();
+    const to = (partes[1] ?? "").trim();
+    // Ponta inexistente no calendário fica visível pro usuário corrigir, mas não
+    // é publicada no model.
+    if (!parseDataIndian(from) || !parseDataIndian(to)) {
+      _rascunho.value = v;
+      modelPeriodo.value = null;
+      return;
+    }
+    _rascunho.value = null;
+    modelPeriodo.value = { from, to };
+    emit("change", modelPeriodo.value);
+  },
+});
+
+// Período que chega de FORA (picker ou parent) manda no display. Só reage a valor
+// preenchido: o caminho de rascunho inválido acima sempre zera o model, então
+// nunca cai aqui e não perde o que o usuário está digitando.
+watch(modelPeriodo, (m) => {
+  if (m && m.from && m.to) _rascunho.value = null;
+});
+
+function indianToQDate(indian: string): string {
+  const [dia, mes, ano] = indian.split("/");
+  return `${ano}/${mes}/${dia}`;
+}
+
+const inicioSelecaoRange = ref<string | null>(null);
+
+function onRangeStart({
+  year,
+  month,
+  day,
+}: {
+  year: number;
+  month: number;
+  day: number;
+}): void {
+  inicioSelecaoRange.value = `${year}/${String(month).padStart(2, "0")}/${String(day).padStart(2, "0")}`;
+}
+
+function onRangeEnd(): void {
+  inicioSelecaoRange.value = null;
+}
+
+function adicionarDiasQDate(qDate: string, dias: number): string {
+  const [ano, mes, dia] = qDate.split("/").map(Number);
+  const date = new Date(ano!, mes! - 1, dia!);
+  date.setDate(date.getDate() + dias);
+  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")}`;
+}
+
+const opcoesDatas = computed(() => {
+  const temDesabilitar = props.disablePast || props.disableFuture;
+  const temLimiteDias = !!props.maxDays && !!inicioSelecaoRange.value;
+
+  if (!temDesabilitar && !temLimiteDias) return undefined;
+
+  const hoje = new Date();
+  const hojeStr = `${hoje.getFullYear()}/${String(hoje.getMonth() + 1).padStart(2, "0")}/${String(hoje.getDate()).padStart(2, "0")}`;
+  const dataLimite = temLimiteDias
+    ? adicionarDiasQDate(inicioSelecaoRange.value!, props.maxDays! - 1)
+    : "";
+
+  return (date: string) => {
+    if (props.disablePast && date < hojeStr) return false;
+    if (props.disableFuture && date > hojeStr) return false;
+    if (temLimiteDias && date > dataLimite) return false;
+    return true;
+  };
+});
+
+function calcularDias(from: string, to: string): number {
+  const [dA, mA, aA] = from.split("/").map(Number) as [number, number, number];
+  const [dB, mB, aB] = to.split("/").map(Number) as [number, number, number];
+  const dataA = new Date(aA, mA - 1, dA);
+  const dataB = new Date(aB, mB - 1, dB);
+  return (
+    Math.round((dataB.getTime() - dataA.getTime()) / (1000 * 60 * 60 * 24)) + 1
+  );
+}
+
+const resumoRange = computed<string>(() => {
+  const m = modelPeriodo.value;
+  if (!m || !m.from || !m.to) return "Nenhum período selecionado";
+  const dias = calcularDias(m.from, m.to);
+  return `${m.from} — ${m.to} (${dias} dia${dias > 1 ? "s" : ""})`;
+});
+
+const regrasCompostas = computed(() => {
+  const regras = [...props.rules];
+  if (props.required) regras.unshift(FormRules.campoObrigatorio);
+  // Cada ponta precisa existir no calendário, e o início não pode ser depois do
+  // fim — sem isto o período ia pro model com data impossível e `calcularDias`
+  // devolvia uma contagem calculada em cima da data "rolada" pelo Date.
+  regras.push((val: string) => {
+    if (!val?.trim()) return true;
+    const m = /^(\d{2}\/\d{2}\/\d{4}) - (\d{2}\/\d{2}\/\d{4})$/.exec(val.trim());
+    if (!m) return true; // período incompleto: deixa o campoObrigatorio decidir
+    const de = parseDataIndian(m[1]!);
+    const ate = parseDataIndian(m[2]!);
+    if (!de || !ate) return "Data inválida";
+    return de <= ate || "A data inicial não pode ser posterior à data final.";
+  });
+  if (props.maxDays) {
+    const max = props.maxDays;
+    regras.push(() => {
+      const m = modelPeriodo.value;
+      if (!m || !m.from || !m.to) return true;
+      const dias = calcularDias(m.from, m.to);
+      return (
+        dias <= max || `O período possui ${dias} dias. Máximo: ${max} dias.`
+      );
+    });
+  }
+  if (props.minDays) {
+    const min = props.minDays;
+    regras.push(() => {
+      const m = modelPeriodo.value;
+      if (!m || !m.from || !m.to) return true;
+      const dias = calcularDias(m.from, m.to);
+      return (
+        dias >= min || `O período possui ${dias} dia(s). Mínimo: ${min} dias.`
+      );
+    });
+  }
+  if (props.blockedRanges?.length) {
+    regras.push(() => {
+      const m = modelPeriodo.value;
+      if (!m || !m.from || !m.to) return true;
+      const fromQ = indianToQDate(m.from);
+      const toQ = indianToQDate(m.to);
+      const conflito = props
+        .blockedRanges!.filter(
+          (p): p is NonNullable<DateRangeValue> => !!p && !!p.from && !!p.to,
+        )
+        .some((b) => {
+          const bFrom = indianToQDate(b.from);
+          const bTo = indianToQDate(b.to);
+          return fromQ <= bTo && toQ >= bFrom;
+        });
+      return !conflito || "O período conflita com períodos bloqueados.";
+    });
+  }
+  return regras;
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/ds-input-base";
+@import "../../scss/ds-picker-m3";
+
+.ds-picker-m3__resumo {
+  padding: 8px 16px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--acai-heading, #{$color-primary-900});
+  background: var(--acai-surface-2, #{$color-primary-25});
+  text-align: center;
+  border-bottom: 1px solid var(--acai-border, #{$color-gray-100});
+}
+
+.ds-picker-m3__limite {
+  padding: 4px 16px 2px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--acai-text-muted, #{$color-gray-600});
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,10 @@
+import type { QInputProps } from 'quasar'
+
+type StateProps = Pick<QInputProps, 'filled' | 'readonly' | 'disable' | 'dense' | 'color'>
+type ValidationProps = Pick<QInputProps, 'rules' | 'mask' | 'label' | 'outlined'>
+
+export interface DatetimeProps extends StateProps, ValidationProps {
+  inputClass?: string
+  modelValue: string | null
+  required?: boolean
+}