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