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