stockshark-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.
185 lines (184 loc) • 6.91 kB
JavaScript
import { defineComponent as z, ref as y, reactive as D, computed as a, watch as R, onMounted as F, createElementBlock as d, openBlock as S, Fragment as G, createElementVNode as p, normalizeStyle as I, renderSlot as _, createCommentVNode as x, normalizeProps as A, guardReactiveProps as B, toDisplayString as C, withModifiers as k } from "vue";
import { createPopper as J } from "nanopop";
import K from "jump.js";
const O = {
id: "vjt-tooltip",
role: "tooltip",
"data-arrow": "r",
"data-hidden": ""
}, Q = ["innerHTML"], U = { class: "vjt-actions" }, W = ["textContent"], X = ["textContent"], Y = ["textContent"], Z = {
key: 0,
id: "vjt-arrow"
}, ot = /* @__PURE__ */ z({
__name: "VTour",
props: {
name: {},
steps: {},
backdrop: { type: Boolean },
autoStart: { type: Boolean },
highlight: { type: Boolean },
margin: {},
buttonLabels: {},
hideSkip: { type: Boolean },
hideArrow: { type: Boolean },
noScroll: { type: Boolean }
},
emits: ["onTourStart", "onTourEnd", "onTourStep"],
setup(q, { expose: E, emit: P }) {
const g = y(void 0), i = y(void 0), t = D({
currentStep: 0,
lastStep: 0,
nextStep: 1,
getCurrentStep: a(() => r.steps[t.currentStep]),
getLastStep: a(() => r.steps[t.lastStep]),
getNextStep: a(() => r.steps[t.nextStep])
}), r = q, h = P;
E({
startTour: m,
nextStep: l,
lastStep: f,
endTour: u,
stopTour: v,
goToStep: V,
resetTour: N
});
const $ = a(() => {
var e, o;
return t.currentStep === r.steps.length - 1 ? ((e = r.buttonLabels) == null ? void 0 : e.done) || "Done" : ((o = r.buttonLabels) == null ? void 0 : o.next) || "Next";
}), T = a(() => {
var e;
return (e = t == null ? void 0 : t.getCurrentStep) == null ? void 0 : e.isCompleted;
});
R(T, (e) => {
e && (console.log("task completed!"), setTimeout(() => {
l();
}, 1e3));
});
const j = y(b(".vjt-highlight") ? b(".vjt-highlight") : "");
async function m() {
t.currentStep = 0, await s(t.currentStep), g.value || (g.value = J(document.querySelector(`${t.getCurrentStep.target}`), i.value, {
position: t.getCurrentStep.placement || "right",
margin: r.margin || (r.highlight || t.getCurrentStep.highlight ? 14 : 8)
})), c(), h("onTourStart");
}
function v() {
document.querySelector("#vjt-backdrop").setAttribute("data-hidden", ""), document.querySelectorAll(".vjt-highlight").forEach((e) => e.classList.remove("vjt-highlight")), i.value.setAttribute("data-hidden", "");
}
function N(e) {
v(), t.currentStep = 0, t.lastStep = 0, t.nextStep = 1, e && m();
}
async function l() {
if (await s(t.nextStep), t.lastStep = t.currentStep, t.currentStep++, t.currentStep > r.steps.length - 1) {
u();
return;
}
t.nextStep = t.currentStep + 1, c();
}
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, c();
}
function u() {
v(), h("onTourEnd");
}
function V(e) {
s(e), t.currentStep = e, t.lastStep = e - 1, t.lastStep === -1 && (t.lastStep = 0), t.nextStep = e + 1, c();
}
async function s(e) {
var o, n;
await ((n = (o = r.steps[e]) == null ? void 0 : o.onBefore) == null ? void 0 : n.call(o));
}
async function c() {
var e, o;
await new Promise((n) => {
M(), H(), i.value.setAttribute("data-hidden", ""), !r.noScroll && !t.getCurrentStep.noScroll ? K(document.querySelector(`${t.getCurrentStep.target}`), {
duration: 500,
offset: -100,
callback: () => {
n();
}
}) : n();
}), i.value.removeAttribute("data-hidden"), i.value.setAttribute(
"data-arrow",
g.value.update({
reference: document.querySelector(`${t.getCurrentStep.target}`),
position: t.getCurrentStep.placement || "right"
}) || "right"
), await ((o = (e = t.getCurrentStep).onAfter) == null ? void 0 : o.call(e)), h("onTourStep");
}
function M() {
document.querySelectorAll(".vjt-highlight").forEach((e) => e.classList.remove("vjt-highlight")), !(!r.highlight && !t.getCurrentStep.highlight) && (document.querySelector(`${t.getCurrentStep.target}`).classList.add("vjt-highlight"), j.value = b(".vjt-highlight"));
}
function H() {
r.backdrop || t.getCurrentStep.backdrop ? document.querySelector("#vjt-backdrop").removeAttribute("data-hidden") : document.querySelector("#vjt-backdrop").setAttribute("data-hidden", "");
}
F(() => {
i.value = document.querySelector("#vjt-tooltip"), r.autoStart && m();
});
function b(e) {
const o = document.querySelector(e);
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 (e, o) => (S(), d(G, null, [
p("div", {
id: "vjt-backdrop",
"data-hidden": "",
style: I("clip-path: " + j.value)
}, null, 4),
p("div", O, [
_(e.$slots, "content", A(B({ _CurrentStep: t })), () => {
var n;
return [
p("div", {
innerHTML: (n = t.getCurrentStep) == null ? void 0 : n.content
}, null, 8, Q)
];
}),
_(e.$slots, "actions", A(B({ lastStep: f, nextStep: l, endTour: u, _CurrentStep: t, getNextLabel: $.value, isCompleted: T.value, props: r })), () => {
var n, w;
return [
p("div", U, [
t.lastStep < t.currentStep ? (S(), d("button", {
key: 0,
type: "button",
onClick: o[0] || (o[0] = k((L) => f(), ["prevent"])),
textContent: C(((n = r.buttonLabels) == null ? void 0 : n.back) || "Back")
}, null, 8, W)) : x("", !0),
r.hideSkip ? x("", !0) : (S(), d("button", {
key: 1,
type: "button",
onClick: o[1] || (o[1] = k((L) => u(), ["prevent"])),
textContent: C(((w = r.buttonLabels) == null ? void 0 : w.skip) || "Skip")
}, null, 8, X)),
p("button", {
type: "button",
onClick: o[2] || (o[2] = k((L) => l(), ["prevent"])),
textContent: C($.value)
}, null, 8, Y)
])
];
}),
r.hideArrow ? x("", !0) : (S(), d("div", Z))
])
], 64));
}
});
export {
ot as VTour
};