acai-ui 1.65.5

package/dist/index40.mjs

@@ -0,0 +1,601 @@
+import { defineComponent, useModel, computed, ref, watch, nextTick, onBeforeUnmount, openBlock, createBlock, Teleport, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString, createVNode, mergeModels } from "vue";
+import AcaiUiButton from "./index49.mjs";
+import _sfc_main$1 from "./index23.mjs";
+import { usePreferencias } from "./index98.mjs";
+import { useLeituraVoz } from "./index97.mjs";
+import { scrollParaElemento } from "./index179.mjs";
+import { passoSemAncora, ESPERA_PADRAO, resolverAlvo, aguardarAlvo, descreverAncora } from "./index84.mjs";
+import { centralizarBalao, expandirRecorte, posicionarBalao } from "./index182.mjs";
+const _hoisted_1 = {
+  class: "acaitour__overlay",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+const _hoisted_2 = ["x", "y", "width", "height"];
+const _hoisted_3 = ["mask"];
+const _hoisted_4 = ["x", "y", "width", "height"];
+const _hoisted_5 = ["aria-busy"];
+const _hoisted_6 = { class: "acaitour__cab" };
+const _hoisted_7 = ["aria-pressed"];
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = { class: "acaitour__rodape" };
+const _hoisted_10 = {
+  class: "acaitour__pontos",
+  "aria-hidden": "true"
+};
+const _hoisted_11 = { class: "acaitour__contador" };
+const _hoisted_12 = {
+  key: 0,
+  class: "acaitour__acoes acaitour__busca"
+};
+const _hoisted_13 = {
+  key: 1,
+  class: "acaitour__acoes"
+};
+const _hoisted_14 = {
+  class: "acaitour__anuncio",
+  role: "status",
+  "aria-live": "polite"
+};
+const PADDING_PADRAO = 8;
+const RAIO_RECORTE = 8;
+const ESPERA_ATE_AVISAR = 350;
+const SELETOR_FOCAVEL = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "acai-ui-tour",
+  props: /* @__PURE__ */ mergeModels({
+    tour: {},
+    startAt: { default: 0 },
+    hideAudio: { type: Boolean },
+    audioLang: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["finish", "exit", "step", "step-skipped"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const aberto = useModel(__props, "modelValue");
+    const sufixo = Math.random().toString(36).slice(2, 8);
+    const idMascara = `acaitour-mask-${sufixo}`;
+    const idTitulo = `acaitour-titulo-${sufixo}`;
+    const idTexto = `acaitour-texto-${sufixo}`;
+    const { preferencias } = usePreferencias();
+    const {
+      suportado: vozSuportada,
+      temVozPara,
+      vozes,
+      idLendo,
+      alternar: alternarFala,
+      parar: pararFala
+    } = useLeituraVoz();
+    const idFalaPasso = `acaitour-voz-${sufixo}`;
+    const idiomaFala = computed(() => props.audioLang || "pt-BR");
+    const mostrarAudio = computed(() => {
+      void vozes.value;
+      return vozSuportada.value && !props.hideAudio && preferencias.leituraVoz && temVozPara(idiomaFala.value);
+    });
+    const lendoPasso = computed(() => idLendo.value === idFalaPasso);
+    function alternarPasso() {
+      const passo = passos.value[indiceAtual.value];
+      if (!passo) return;
+      const texto = [passo.title, passo.text].filter(Boolean).join(". ");
+      alternarFala(texto, {
+        id: idFalaPasso,
+        lang: idiomaFala.value,
+        voz: preferencias.vozNome,
+        rate: preferencias.vozVelocidade
+      });
+    }
+    const indiceAtual = ref(0);
+    const alvoEl = ref(null);
+    const recorte = ref(null);
+    const posicao = ref({ top: 0, left: 0, side: "bottom" });
+    const pronto = ref(false);
+    const anuncio = ref("");
+    const balaoRef = ref(null);
+    const buscando = ref(false);
+    let focoAnterior = null;
+    let direcao = 1;
+    let frameAgendado = 0;
+    let observador = null;
+    let sessao = 0;
+    let controleBusca = null;
+    let temporizadorAviso = 0;
+    let buscaCancelada = false;
+    let desescutarAlvo = null;
+    const passos = computed(() => props.tour.steps ?? []);
+    const passoAtual = computed(() => passos.value[indiceAtual.value]);
+    const ehUltimo = computed(() => indiceAtual.value >= passos.value.length - 1);
+    const tituloTour = computed(() => props.tour.title || "Aprenda a usar");
+    const semAnimacao = computed(() => {
+      if (preferencias.reduzirAnimacoes) return true;
+      if (typeof window === "undefined" || !window.matchMedia) return false;
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    });
+    function janela() {
+      return { width: window.innerWidth, height: window.innerHeight };
+    }
+    const bloqueios = computed(() => {
+      var _a;
+      const r = recorte.value;
+      if (!r) return [{ nome: "tudo", estilo: { inset: "0" } }];
+      const faixas = [
+        { nome: "topo", estilo: { top: "0", left: "0", right: "0", height: `${r.top}px` } },
+        {
+          nome: "base",
+          estilo: { top: `${r.top + r.height}px`, left: "0", right: "0", bottom: "0" }
+        },
+        {
+          nome: "esquerda",
+          estilo: { top: `${r.top}px`, left: "0", width: `${r.left}px`, height: `${r.height}px` }
+        },
+        {
+          nome: "direita",
+          estilo: {
+            top: `${r.top}px`,
+            left: `${r.left + r.width}px`,
+            right: "0",
+            height: `${r.height}px`
+          }
+        }
+      ];
+      if ((_a = passoAtual.value) == null ? void 0 : _a.interactive) return faixas;
+      return [
+        ...faixas,
+        {
+          nome: "centro",
+          estilo: {
+            top: `${r.top}px`,
+            left: `${r.left}px`,
+            width: `${r.width}px`,
+            height: `${r.height}px`
+          }
+        }
+      ];
+    });
+    const estiloSeta = computed(() => {
+      const r = recorte.value;
+      if (!r) return {};
+      const lado = posicao.value.side;
+      if (lado === "top" || lado === "bottom") {
+        const centro2 = r.left + r.width / 2 - posicao.value.left;
+        return { left: `${centro2}px` };
+      }
+      const centro = r.top + r.height / 2 - posicao.value.top;
+      return { top: `${centro}px` };
+    });
+    function medir() {
+      var _a, _b, _c;
+      const vp = janela();
+      const balao = (_a = balaoRef.value) == null ? void 0 : _a.getBoundingClientRect();
+      const tamanhoBalao = { width: (balao == null ? void 0 : balao.width) || 320, height: (balao == null ? void 0 : balao.height) || 160 };
+      if (!alvoEl.value) {
+        recorte.value = null;
+        posicao.value = centralizarBalao(tamanhoBalao, vp);
+        pronto.value = true;
+        return;
+      }
+      const r = alvoEl.value.getBoundingClientRect();
+      const bruto = { top: r.top, left: r.left, width: r.width, height: r.height };
+      const padding = ((_b = passoAtual.value) == null ? void 0 : _b.padding) ?? PADDING_PADRAO;
+      recorte.value = expandirRecorte(bruto, padding, vp);
+      posicao.value = posicionarBalao(
+        recorte.value,
+        tamanhoBalao,
+        vp,
+        ((_c = passoAtual.value) == null ? void 0 : _c.placement) ?? "auto"
+      );
+      pronto.value = true;
+    }
+    function agendarMedicao() {
+      if (frameAgendado) return;
+      frameAgendado = requestAnimationFrame(() => {
+        frameAgendado = 0;
+        medir();
+      });
+    }
+    function bloquearScrollManual(evento) {
+      var _a;
+      if (evento.target instanceof Node && ((_a = balaoRef.value) == null ? void 0 : _a.contains(evento.target))) return;
+      evento.preventDefault();
+    }
+    function ligarObservadores() {
+      window.addEventListener("resize", agendarMedicao);
+      window.addEventListener("scroll", agendarMedicao, { capture: true, passive: true });
+      document.addEventListener("keydown", aoTeclar, true);
+      document.addEventListener("wheel", bloquearScrollManual, { capture: true, passive: false });
+      document.addEventListener("touchmove", bloquearScrollManual, { capture: true, passive: false });
+      if (typeof ResizeObserver !== "undefined") {
+        observador = new ResizeObserver(agendarMedicao);
+        observador.observe(document.body);
+      }
+    }
+    function desligarObservadores() {
+      window.removeEventListener("resize", agendarMedicao);
+      window.removeEventListener("scroll", agendarMedicao, { capture: true });
+      document.removeEventListener("keydown", aoTeclar, true);
+      document.removeEventListener("wheel", bloquearScrollManual, { capture: true });
+      document.removeEventListener("touchmove", bloquearScrollManual, { capture: true });
+      observador == null ? void 0 : observador.disconnect();
+      observador = null;
+      if (frameAgendado) cancelAnimationFrame(frameAgendado);
+      frameAgendado = 0;
+    }
+    function focaveis() {
+      var _a;
+      const doBalao = balaoRef.value ? [...balaoRef.value.querySelectorAll(SELETOR_FOCAVEL)] : [];
+      if (!((_a = passoAtual.value) == null ? void 0 : _a.interactive) || !alvoEl.value) return doBalao;
+      const doAlvo = alvoEl.value.matches(SELETOR_FOCAVEL) ? [alvoEl.value] : [...alvoEl.value.querySelectorAll(SELETOR_FOCAVEL)];
+      return [...doAlvo, ...doBalao];
+    }
+    function ehCampoDeTexto(el) {
+      if (!(el instanceof HTMLElement)) return false;
+      if (el.isContentEditable) return true;
+      return ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
+    }
+    function aoTeclar(evento) {
+      var _a;
+      if (!aberto.value) return;
+      if (evento.key === "Escape") {
+        evento.preventDefault();
+        sair();
+        return;
+      }
+      if (evento.key === "Tab") {
+        const lista = focaveis();
+        if (lista.length === 0) return;
+        evento.preventDefault();
+        const atual = lista.indexOf(document.activeElement);
+        const passo = evento.shiftKey ? -1 : 1;
+        const proximoIndice = (atual + passo + lista.length) % lista.length;
+        (_a = lista[proximoIndice]) == null ? void 0 : _a.focus();
+        return;
+      }
+      if (ehCampoDeTexto(evento.target)) return;
+      if (evento.key === "ArrowRight") {
+        evento.preventDefault();
+        proximo();
+        return;
+      }
+      if (evento.key === "ArrowLeft") {
+        evento.preventDefault();
+        anterior();
+        return;
+      }
+      if (evento.key === "Enter" && evento.target === balaoRef.value) {
+        evento.preventDefault();
+        proximo();
+        return;
+      }
+      const ehBotao = evento.target instanceof HTMLElement && evento.target.closest('button, [role="button"]');
+      if (evento.key === " " && ehBotao) return;
+      if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(evento.key)) {
+        evento.preventDefault();
+      }
+    }
+    function pularPasso(passo, indice, motivo) {
+      const referencia = descreverAncora(motivo === "activate-not-found" ? passo.activate : passo);
+      emits("step-skipped", { index: indice, step: passo, reason: motivo, reference: referencia });
+      return;
+    }
+    function pularBusca() {
+      buscaCancelada = true;
+      controleBusca == null ? void 0 : controleBusca.abort();
+    }
+    function encerrarAviso() {
+      if (temporizadorAviso) window.clearTimeout(temporizadorAviso);
+      temporizadorAviso = 0;
+      buscando.value = false;
+      controleBusca = null;
+    }
+    async function procurarComAviso(ancora, timeout) {
+      const imediato = resolverAlvo(ancora);
+      if (imediato) return imediato;
+      buscaCancelada = false;
+      controleBusca = new AbortController();
+      temporizadorAviso = window.setTimeout(() => {
+        buscando.value = true;
+        anuncio.value = "Procurando o próximo passo.";
+      }, ESPERA_ATE_AVISAR);
+      try {
+        return await aguardarAlvo(ancora, timeout, controleBusca.signal);
+      } finally {
+        encerrarAviso();
+      }
+    }
+    async function prepararPasso(passo) {
+      if (passo.before) {
+        try {
+          await passo.before();
+        } catch (erro) {
+        }
+      }
+      const ativar = passo.activate;
+      if (!ativar) return true;
+      if (!ativar.always && !passoSemAncora(passo) && resolverAlvo(passo)) return true;
+      const gatilho = await procurarComAviso(ativar, ativar.waitFor ?? passo.waitFor ?? ESPERA_PADRAO);
+      if (!gatilho) return false;
+      gatilho.click();
+      await nextTick();
+      return true;
+    }
+    async function irPara(indice) {
+      if (indice < 0) return;
+      if (indice >= passos.value.length) return concluir();
+      const passo = passos.value[indice];
+      const minhaSessao = ++sessao;
+      controleBusca == null ? void 0 : controleBusca.abort();
+      const ativou = await prepararPasso(passo);
+      if (minhaSessao !== sessao) return;
+      if (passoSemAncora(passo)) {
+        alvoEl.value = null;
+        aplicarPasso(indice);
+        return;
+      }
+      const el = await procurarComAviso(passo, passo.waitFor ?? ESPERA_PADRAO);
+      if (minhaSessao !== sessao) return;
+      if (!el) {
+        const motivo = buscaCancelada ? "cancelled" : ativou ? "target-not-found" : "activate-not-found";
+        pularPasso(passo, indice, motivo);
+        const seguinte = indice + direcao;
+        if (seguinte < 0) return;
+        return irPara(seguinte);
+      }
+      scrollParaElemento(el, void 0, semAnimacao.value ? "auto" : "smooth");
+      alvoEl.value = el;
+      aplicarPasso(indice);
+    }
+    function escutarAlvoInterativo() {
+      desescutarAlvo == null ? void 0 : desescutarAlvo();
+      desescutarAlvo = null;
+      const passo = passoAtual.value;
+      const el = alvoEl.value;
+      if (!el || !(passo == null ? void 0 : passo.interactive) || passo.advanceOn === "manual") return;
+      const aoAgir = () => {
+        desescutarAlvo == null ? void 0 : desescutarAlvo();
+        desescutarAlvo = null;
+        window.setTimeout(() => {
+          if (aberto.value) proximo();
+        }, 0);
+      };
+      el.addEventListener("click", aoAgir);
+      desescutarAlvo = () => el.removeEventListener("click", aoAgir);
+    }
+    function aplicarPasso(indice) {
+      pararFala();
+      indiceAtual.value = indice;
+      pronto.value = false;
+      emits("step", indice);
+      const passo = passos.value[indice];
+      anuncio.value = `Passo ${indice + 1} de ${passos.value.length}. ${(passo == null ? void 0 : passo.title) ?? ""} ${(passo == null ? void 0 : passo.text) ?? ""}`.trim();
+      escutarAlvoInterativo();
+      void nextTick(() => {
+        var _a;
+        medir();
+        agendarMedicao();
+        if (!(passo == null ? void 0 : passo.interactive)) (_a = balaoRef.value) == null ? void 0 : _a.focus({ preventScroll: true });
+      });
+    }
+    function proximo() {
+      direcao = 1;
+      void irPara(indiceAtual.value + 1);
+    }
+    function anterior() {
+      direcao = -1;
+      void irPara(indiceAtual.value - 1);
+    }
+    function encerrar() {
+      pararFala();
+      aberto.value = false;
+      sessao++;
+      controleBusca == null ? void 0 : controleBusca.abort();
+      encerrarAviso();
+      desescutarAlvo == null ? void 0 : desescutarAlvo();
+      desescutarAlvo = null;
+      desligarObservadores();
+      alvoEl.value = null;
+      recorte.value = null;
+      pronto.value = false;
+      focoAnterior == null ? void 0 : focoAnterior.focus({ preventScroll: true });
+      focoAnterior = null;
+    }
+    function concluir() {
+      encerrar();
+      emits("finish");
+    }
+    function sair() {
+      encerrar();
+      emits("exit");
+    }
+    function iniciar() {
+      focoAnterior = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      direcao = 1;
+      ligarObservadores();
+      void irPara(Math.min(Math.max(props.startAt, 0), Math.max(passos.value.length - 1, 0)));
+    }
+    watch(
+      aberto,
+      (ativo) => {
+        if (ativo) {
+          if (passos.value.length === 0) {
+            aberto.value = false;
+            emits("exit");
+            return;
+          }
+          void nextTick(iniciar);
+        } else {
+          desligarObservadores();
+        }
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      pararFala();
+      sessao++;
+      controleBusca == null ? void 0 : controleBusca.abort();
+      encerrarAviso();
+      desescutarAlvo == null ? void 0 : desescutarAlvo();
+      desescutarAlvo = null;
+      desligarObservadores();
+    });
+    __expose({ proximo, anterior, sair, irPara, pularBusca });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        aberto.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["acaitour", { "acaitour--estatico": semAnimacao.value }])
+        }, [
+          (openBlock(), createElementBlock("svg", _hoisted_1, [
+            createElementVNode("defs", null, [
+              createElementVNode("mask", { id: idMascara }, [
+                _cache[0] || (_cache[0] = createElementVNode("rect", {
+                  x: "0",
+                  y: "0",
+                  width: "100%",
+                  height: "100%",
+                  fill: "white"
+                }, null, -1)),
+                recorte.value ? (openBlock(), createElementBlock("rect", {
+                  key: 0,
+                  x: recorte.value.left,
+                  y: recorte.value.top,
+                  width: recorte.value.width,
+                  height: recorte.value.height,
+                  rx: RAIO_RECORTE,
+                  fill: "black"
+                }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+              ])
+            ]),
+            createElementVNode("rect", {
+              class: "acaitour__tinta",
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              mask: `url(#${idMascara})`
+            }, null, 8, _hoisted_3),
+            recorte.value ? (openBlock(), createElementBlock("rect", {
+              key: 0,
+              class: "acaitour__aro",
+              x: recorte.value.left,
+              y: recorte.value.top,
+              width: recorte.value.width,
+              height: recorte.value.height,
+              rx: RAIO_RECORTE,
+              fill: "none"
+            }, null, 8, _hoisted_4)) : createCommentVNode("", true)
+          ])),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(bloqueios.value, (bloqueio) => {
+            return openBlock(), createElementBlock("div", {
+              key: bloqueio.nome,
+              class: "acaitour__bloqueio",
+              style: normalizeStyle(bloqueio.estilo)
+            }, null, 4);
+          }), 128)),
+          createElementVNode("div", {
+            ref_key: "balaoRef",
+            ref: balaoRef,
+            class: normalizeClass(["acaitour__balao", [`acaitour__balao--${posicao.value.side}`, { "acaitour__balao--solto": !recorte.value }]]),
+            style: normalizeStyle({ top: `${posicao.value.top}px`, left: `${posicao.value.left}px`, opacity: pronto.value ? 1 : 0 }),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": idTitulo,
+            "aria-describedby": idTexto,
+            "aria-busy": buscando.value ? "true" : void 0,
+            tabindex: "-1"
+          }, [
+            recorte.value ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: "acaitour__seta",
+              style: normalizeStyle(estiloSeta.value),
+              "aria-hidden": "true"
+            }, null, 4)) : createCommentVNode("", true),
+            createElementVNode("header", _hoisted_6, [
+              createElementVNode("h2", {
+                id: idTitulo,
+                class: "acaitour__titulo"
+              }, toDisplayString(((_a = passoAtual.value) == null ? void 0 : _a.title) || tituloTour.value), 1),
+              mostrarAudio.value ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "acaitour__ouvir",
+                "aria-pressed": lendoPasso.value,
+                "aria-label": "Ouvir este passo",
+                onClick: alternarPasso
+              }, [
+                createVNode(_sfc_main$1, {
+                  name: lendoPasso.value ? "stop" : "volume_up",
+                  size: "md",
+                  decorative: ""
+                }, null, 8, ["name"])
+              ], 8, _hoisted_7)) : createCommentVNode("", true),
+              createElementVNode("button", {
+                type: "button",
+                class: "acaitour__fechar",
+                "aria-label": `Sair de ${tituloTour.value}`,
+                onClick: sair
+              }, [
+                createVNode(_sfc_main$1, {
+                  name: "close",
+                  size: "md"
+                })
+              ], 8, _hoisted_8)
+            ]),
+            createElementVNode("p", {
+              id: idTexto,
+              class: "acaitour__texto"
+            }, toDisplayString((_b = passoAtual.value) == null ? void 0 : _b.text), 1),
+            createElementVNode("footer", _hoisted_9, [
+              createElementVNode("div", _hoisted_10, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(passos.value, (_, indice) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: indice,
+                    class: normalizeClass(["acaitour__ponto", { "acaitour__ponto--ativo": indice === indiceAtual.value }])
+                  }, null, 2);
+                }), 128))
+              ]),
+              createElementVNode("span", _hoisted_11, "Passo " + toDisplayString(indiceAtual.value + 1) + " de " + toDisplayString(passos.value.length), 1),
+              buscando.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                _cache[1] || (_cache[1] = createElementVNode("span", {
+                  class: "acaitour__busca-giro",
+                  "aria-hidden": "true"
+                }, null, -1)),
+                _cache[2] || (_cache[2] = createElementVNode("span", { class: "acaitour__busca-texto" }, "Procurando…", -1)),
+                createVNode(AcaiUiButton, {
+                  flat: "",
+                  dense: "",
+                  color: "primary",
+                  label: "Pular",
+                  onClick: pularBusca
+                })
+              ])) : (openBlock(), createElementBlock("div", _hoisted_13, [
+                indiceAtual.value > 0 ? (openBlock(), createBlock(AcaiUiButton, {
+                  key: 0,
+                  flat: "",
+                  dense: "",
+                  color: "primary",
+                  label: "Anterior",
+                  onClick: anterior
+                })) : createCommentVNode("", true),
+                createVNode(AcaiUiButton, {
+                  dense: "",
+                  color: "primary",
+                  label: ehUltimo.value ? "Concluir" : "Próximo",
+                  onClick: proximo
+                }, null, 8, ["label"])
+              ]))
+            ])
+          ], 14, _hoisted_5),
+          createElementVNode("div", _hoisted_14, toDisplayString(anuncio.value), 1)
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index40.mjs.map