@globalhive/vuejs-tour/dist/vuejs-tour.js

VueJS Tour is a lightweight, simple and customizable tour plugin. It provides a quick and easy way to guide your users through your application.

import { defineComponent as H, ref as y, reactive as R, computed as l, onMounted as F, onUnmounted as U, openBlock as c, createElementBlock as d, Fragment as G, createElementVNode as p, normalizeStyle as J, renderSlot as q, normalizeProps as E, guardReactiveProps as z, withModifiers as x, toDisplayString as C, createCommentVNode as T } from "vue";
import { createPopper as K } from "nanopop";
import O from "jump.js";
const Q = {
  id: "vjt-tooltip",
  role: "tooltip",
  "data-arrow": "r",
  "data-hidden": ""
}, W = ["innerHTML"], X = { class: "vjt-actions" }, Y = ["textContent"], Z = ["textContent"], tt = ["textContent"], et = {
  key: 0,
  id: "vjt-arrow"
}, at = /* @__PURE__ */ H({
  __name: "VTour",
  props: {
    name: {},
    steps: {},
    backdrop: { type: Boolean },
    autoStart: { type: Boolean },
    startDelay: {},
    highlight: { type: Boolean },
    margin: {},
    buttonLabels: {},
    saveToLocalStorage: {},
    hideSkip: { type: Boolean },
    hideArrow: { type: Boolean },
    noScroll: { type: Boolean },
    resizeTimeout: {}
  },
  emits: ["onTourStart", "onTourEnd", "onTourStep"],
  setup(P, { expose: I, emit: M }) {
    const S = y(void 0), i = y(void 0), t = R({
      currentStep: 0,
      lastStep: 0,
      nextStep: 1,
      getCurrentStep: l(() => e.steps[t.currentStep]),
      getLastStep: l(() => e.steps[t.lastStep]),
      getNextStep: l(() => e.steps[t.nextStep])
    }), e = P, g = M;
    I({
      startTour: h,
      nextStep: v,
      lastStep: f,
      endTour: u,
      stopTour: m,
      goToStep: V,
      resetTour: N,
      updatePosition: a,
      updateHighlight: L,
      updateBackdrop: $
    });
    const k = l(() => {
      var n, r;
      return t.currentStep === e.steps.length - 1 ? ((n = e.buttonLabels) == null ? void 0 : n.done) || "Done" : ((r = e.buttonLabels) == null ? void 0 : r.next) || "Next";
    }), j = y(
      b(".vjt-highlight") ? b(".vjt-highlight") : ""
    );
    function h() {
      localStorage.getItem("vjt-" + (e.name || "default")) !== "true" && (e.saveToLocalStorage === "step" ? (t.currentStep = parseInt(
        localStorage.getItem("vjt-" + (e.name || "default")) || "0"
      ), t.currentStep > 0 && (t.lastStep = Math.max(t.currentStep - 1, 0), t.nextStep = t.currentStep + 1)) : t.currentStep = 0, setTimeout(async () => {
        await s(t.currentStep), S.value || (S.value = K(
          document.querySelector(
            `${t.getCurrentStep.target}`
          ),
          i.value,
          {
            position: t.getCurrentStep.placement || "right",
            margin: e.margin || (e.highlight || t.getCurrentStep.highlight ? 14 : 8)
          }
        )), a(), g("onTourStart");
      }, e.startDelay));
    }
    function m() {
      document.querySelector("#vjt-backdrop").setAttribute("data-hidden", ""), document.querySelectorAll(".vjt-highlight").forEach((n) => n.classList.remove("vjt-highlight")), i.value.setAttribute("data-hidden", "");
    }
    function N(n) {
      m(), t.currentStep = 0, t.lastStep = 0, t.nextStep = 1, localStorage.removeItem("vjt-" + (e.name || "default")), n && h();
    }
    async function v() {
      if (await s(t.nextStep), t.lastStep = t.currentStep, t.currentStep++, t.currentStep > e.steps.length - 1) {
        u();
        return;
      }
      t.nextStep = t.currentStep + 1, a();
    }
    async function f() {
      if (await s(t.lastStep), t.currentStep = t.lastStep, t.lastStep--, t.lastStep === -1 && (t.lastStep = 0), t.currentStep < 0) {
        u();
        return;
      }
      t.nextStep = t.currentStep + 1, a();
    }
    function u() {
      m(), e.saveToLocalStorage !== "never" && localStorage.setItem("vjt-" + (e.name || "default"), "true"), g("onTourEnd");
    }
    function V(n) {
      s(n), t.currentStep = n, t.lastStep = Math.max(n - 1, 0), t.nextStep = n + 1, a();
    }
    async function s(n) {
      var r, o;
      await ((o = (r = e.steps[n]) == null ? void 0 : r.onBefore) == null ? void 0 : o.call(r));
    }
    async function a() {
      var n, r;
      await new Promise((o) => {
        L(), $(), i.value.setAttribute("data-hidden", ""), !e.noScroll && !t.getCurrentStep.noScroll ? O(
          document.querySelector(
            `${t.getCurrentStep.target}`
          ),
          {
            duration: 500,
            offset: -100,
            callback: () => {
              o();
            }
          }
        ) : o();
      }), i.value.removeAttribute("data-hidden"), i.value.setAttribute(
        "data-arrow",
        S.value.update({
          reference: document.querySelector(
            `${t.getCurrentStep.target}`
          ),
          position: t.getCurrentStep.placement || "right"
        }) || "right"
      ), e.saveToLocalStorage === "step" && localStorage.setItem(
        "vjt-" + (e.name || "default"),
        t.currentStep.toString()
      ), await ((r = (n = t.getCurrentStep).onAfter) == null ? void 0 : r.call(n)), g("onTourStep");
    }
    function L() {
      document.querySelectorAll(".vjt-highlight").forEach((n) => n.classList.remove("vjt-highlight")), !(!e.highlight && !t.getCurrentStep.highlight) && (document.querySelector(
        `${t.getCurrentStep.target}`
      ).classList.add("vjt-highlight"), j.value = b(".vjt-highlight"));
    }
    function $() {
      e.backdrop || t.getCurrentStep.backdrop ? document.querySelector("#vjt-backdrop").removeAttribute("data-hidden") : document.querySelector("#vjt-backdrop").setAttribute("data-hidden", "");
    }
    let w;
    const D = l(() => e.resizeTimeout || 250), _ = () => {
      a(), clearTimeout(w), w = setTimeout(() => {
        a();
      }, D.value);
    };
    F(() => {
      i.value = document.querySelector("#vjt-tooltip"), e.autoStart && h(), window.addEventListener("resize", _);
    }), U(() => {
      window.removeEventListener("resize", _);
    });
    function b(n) {
      const r = document.querySelector(n);
      if (!r) return "";
      const o = r.getBoundingClientRect();
      return `polygon(
    0% 0%,
    0% 100%,
    ${o.left}px 100%,
    ${o.left}px ${o.top}px,
    ${o.right}px ${o.top}px,
    ${o.right}px ${o.bottom}px,
    ${o.left}px ${o.bottom}px,
    ${o.left}px 100%,
    100% 100%,
    100% 0%
  )`;
    }
    return (n, r) => (c(), d(G, null, [
      p("div", {
        id: "vjt-backdrop",
        "data-hidden": "",
        style: J("clip-path: " + j.value)
      }, null, 4),
      p("div", Q, [
        q(n.$slots, "content", E(z({ _CurrentStep: t })), () => {
          var o;
          return [
            p("div", {
              innerHTML: (o = t.getCurrentStep) == null ? void 0 : o.content
            }, null, 8, W)
          ];
        }),
        q(n.$slots, "actions", E(z({ lastStep: f, nextStep: v, endTour: u, _CurrentStep: t, getNextLabel: k.value, props: e })), () => {
          var o, A;
          return [
            p("div", X, [
              t.lastStep < t.currentStep ? (c(), d("button", {
                key: 0,
                type: "button",
                onClick: r[0] || (r[0] = x((B) => f(), ["prevent"])),
                textContent: C(((o = e.buttonLabels) == null ? void 0 : o.back) || "Back")
              }, null, 8, Y)) : T("", !0),
              e.hideSkip ? T("", !0) : (c(), d("button", {
                key: 1,
                type: "button",
                onClick: r[1] || (r[1] = x((B) => u(), ["prevent"])),
                textContent: C(((A = e.buttonLabels) == null ? void 0 : A.skip) || "Skip")
              }, null, 8, Z)),
              p("button", {
                type: "button",
                onClick: r[2] || (r[2] = x((B) => v(), ["prevent"])),
                textContent: C(k.value)
              }, null, 8, tt)
            ])
          ];
        }),
        e.hideArrow ? T("", !0) : (c(), d("div", et))
      ])
    ], 64));
  }
});
export {
  at as VTour
};