@mkpelletier/vuejs-tour/dist/vuejs-tour.umd.cjs

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

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("nanopop"),require("jump.js")):typeof define=="function"&&define.amd?define(["exports","vue","nanopop","jump.js"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VueJSTour={},i.vue,i.nanopop,i.jump.js))})(this,function(i,e,C,j){"use strict";const T={id:"vjt-tooltip",role:"tooltip","data-arrow":"r","data-hidden":""},v=["innerHTML"],L={class:"vjt-actions"},$=["textContent"],B=["textContent"],w=["textContent"],_={key:0,id:"vjt-arrow"},q=e.defineComponent({__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}},emits:["onTourStart","onTourEnd","onTourStep"],setup(E,{expose:V,emit:A}){const u=e.ref(void 0),l=e.ref(void 0),t=e.reactive({currentStep:0,lastStep:0,nextStep:1,getCurrentStep:e.computed(()=>o.steps[t.currentStep]),getLastStep:e.computed(()=>o.steps[t.lastStep]),getNextStep:e.computed(()=>o.steps[t.nextStep])}),o=E,d=A;V({startTour:S,nextStep:h,lastStep:m,endTour:p,stopTour:g,goToStep:P,resetTour:N});const y=e.computed(()=>{var n,a;return t.currentStep===o.steps.length-1?((n=o.buttonLabels)==null?void 0:n.done)||"Done":((a=o.buttonLabels)==null?void 0:a.next)||"Next"}),b=e.ref(f(".vjt-highlight")?f(".vjt-highlight"):"");function S(){localStorage.getItem("vjt-"+(o.name||"default"))!=="true"&&(o.saveToLocalStorage==="step"?t.currentStep=parseInt(localStorage.getItem("vjt-"+(o.name||"default"))||"0"):t.currentStep=0,setTimeout(async()=>{await c(t.currentStep),u.value||(u.value=C.createPopper(document.querySelector(`${t.getCurrentStep.target}`),l.value,{position:t.getCurrentStep.placement||"right",margin:o.margin||(o.highlight||t.getCurrentStep.highlight?14:8)})),s(),d("onTourStart")},o.startDelay))}function g(){(o.backdrop||t.getLastStep.backdrop)&&document.querySelector("#vjt-backdrop").setAttribute("data-hidden",""),(o.highlight||t.getLastStep.highlight)&&document.querySelectorAll(".vjt-highlight").forEach(n=>n.classList.remove("vjt-highlight")),l.value.setAttribute("data-hidden","")}function N(n){g(),t.currentStep=0,t.lastStep=0,t.nextStep=1,localStorage.removeItem("vjt-"+(o.name||"default")),n&&S()}async function h(){if(await c(t.nextStep),t.lastStep=t.currentStep,t.currentStep++,t.currentStep>o.steps.length-1){p();return}t.nextStep=t.currentStep++,s()}async function m(){if(await c(t.lastStep),t.currentStep=t.lastStep,t.lastStep--,t.lastStep===-1&&(t.lastStep=0),t.currentStep<0){p();return}t.nextStep=t.currentStep++,s()}function p(){g(),o.saveToLocalStorage!=="never"&&localStorage.setItem("vjt-"+(o.name||"default"),"true"),d("onTourEnd")}function P(n){c(n),t.currentStep=n,t.lastStep=n-1,t.lastStep===-1&&(t.lastStep=0),t.nextStep=n+1,s()}async function c(n){var a,r;await((r=(a=o.steps[n]).onBefore)==null?void 0:r.call(a))}async function s(){var n,a;await new Promise(r=>{M(),D(),l.value.setAttribute("data-hidden",""),!o.noScroll&&!t.getCurrentStep.noScroll?j(document.querySelector(`${t.getCurrentStep.target}`),{duration:500,offset:-100,callback:()=>{r()}}):r()}),l.value.removeAttribute("data-hidden"),l.value.setAttribute("data-arrow",u.value.update({reference:document.querySelector(`${t.getCurrentStep.target}`),position:t.getCurrentStep.placement||"right"})||"right"),o.saveToLocalStorage==="step"&&localStorage.setItem("vjt-"+(o.name||"default"),t.currentStep.toString()),await((a=(n=t.getCurrentStep).onAfter)==null?void 0:a.call(n)),d("onTourStep")}function M(){document.querySelectorAll(".vjt-highlight").forEach(n=>n.classList.remove("vjt-highlight")),!(!o.highlight&&!t.getCurrentStep.highlight)&&(document.querySelector(`${t.getCurrentStep.target}`).classList.add("vjt-highlight"),b.value=f(".vjt-highlight"))}function D(){o.backdrop||t.getCurrentStep.backdrop?document.querySelector("#vjt-backdrop").removeAttribute("data-hidden"):document.querySelector("#vjt-backdrop").setAttribute("data-hidden","")}e.onMounted(()=>{l.value=document.querySelector("#vjt-tooltip"),o.autoStart&&S()});function f(n){const a=document.querySelector(n);if(!a)return"";const r=a.getBoundingClientRect();return`polygon(
    0% 0%,
    0% 100%,
    ${r.left}px 100%,
    ${r.left}px ${r.top}px,
    ${r.right}px ${r.top}px,
    ${r.right}px ${r.bottom}px,
    ${r.left}px ${r.bottom}px,
    ${r.left}px 100%,
    100% 100%,
    100% 0%
  )`}return(n,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{id:"vjt-backdrop","data-hidden":"",style:e.normalizeStyle("clip-path: "+b.value)},null,4),e.createElementVNode("div",T,[e.renderSlot(n.$slots,"content",e.normalizeProps(e.guardReactiveProps({_CurrentStep:t})),()=>{var r;return[e.createElementVNode("div",{innerHTML:(r=t.getCurrentStep)==null?void 0:r.content},null,8,v)]}),e.renderSlot(n.$slots,"actions",e.normalizeProps(e.guardReactiveProps({lastStep:m,nextStep:h,endTour:p,_CurrentStep:t,getNextLabel:y.value,props:o})),()=>{var r,k;return[e.createElementVNode("div",L,[t.lastStep<t.currentStep?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",onClick:a[0]||(a[0]=e.withModifiers(x=>m(),["prevent"])),textContent:e.toDisplayString(((r=o.buttonLabels)==null?void 0:r.back)||"Back")},null,8,$)):e.createCommentVNode("",!0),o.hideSkip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",onClick:a[1]||(a[1]=e.withModifiers(x=>p(),["prevent"])),textContent:e.toDisplayString(((k=o.buttonLabels)==null?void 0:k.skip)||"Skip")},null,8,B)),e.createElementVNode("button",{type:"button",onClick:a[2]||(a[2]=e.withModifiers(x=>h(),["prevent"])),textContent:e.toDisplayString(y.value)},null,8,w)])]}),o.hideArrow?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",_))])],64))}});i.VTour=q,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});