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