@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(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("nanopop"),require("jump.js")):typeof define=="function"&&define.amd?define(["exports","vue","nanopop","jump.js"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f.VueJSTour={},f.Vue,f.nanopop,f.jump))})(this,(function(f,a,te,ae){"use strict";const ne=(e,o,r,t)=>(e/=t,r*e*e+o),oe=(e,o,r,t)=>(e/=t,-r*e*(e-2)+o),q=(e,o,r,t)=>(e/=t/2,e<1?r/2*e*e+o:(e--,-r/2*(e*(e-2)-1)+o)),re={easeInQuad:ne,easeOutQuad:oe,easeInOutQuad:q,easeInCubic:(e,o,r,t)=>(e/=t,r*e*e*e+o),easeOutCubic:(e,o,r,t)=>(e/=t,e--,r*(e*e*e+1)+o),easeInOutCubic:(e,o,r,t)=>(e/=t/2,e<1?r/2*e*e*e+o:(e-=2,r/2*(e*e*e+2)+o)),easeInQuart:(e,o,r,t)=>(e/=t,r*e*e*e*e+o),easeOutQuart:(e,o,r,t)=>(e/=t,e--,-r*(e*e*e*e-1)+o),easeInOutQuart:(e,o,r,t)=>(e/=t/2,e<1?r/2*e*e*e*e+o:(e-=2,-r/2*(e*e*e*e-2)+o)),easeInQuint:(e,o,r,t)=>(e/=t,r*e*e*e*e*e+o),easeOutQuint:(e,o,r,t)=>(e/=t,e--,r*(e*e*e*e*e+1)+o),easeInOutQuint:(e,o,r,t)=>(e/=t/2,e<1?r/2*e*e*e*e*e+o:(e-=2,r/2*(e*e*e*e*e+2)+o))},le=["data-hidden"],ie=["id","data-hidden"],se=["id","aria-modal","aria-label","aria-describedby","tabindex","data-hidden"],ue={key:0,role:"status","aria-live":"polite","aria-atomic":"true",class:"vjt-sr-only"},ce=["id"],de=["id","innerHTML"],pe={class:"vjt-actions"},fe=["aria-label"],me=["aria-label"],ve=["aria-label"],ge=a.defineComponent({__name:"VTour",props:{name:{default:"tour"},steps:{},backdrop:{type:Boolean,default:!1},autoStart:{type:Boolean,default:!1},startDelay:{default:0},highlight:{type:Boolean,default:!1},margin:{default:8},buttonLabels:{},saveToLocalStorage:{default:"never"},hideSkip:{type:Boolean,default:!1},hideArrow:{type:Boolean,default:!1},noScroll:{type:Boolean,default:!1},resizeTimeout:{default:250},defaultPlacement:{default:"right"},jumpOptions:{},enableA11y:{type:Boolean,default:!1},keyboardNav:{type:Boolean,default:!0},ariaLabel:{default:"Guided tour"},teleportDelay:{default:100},restartOnPropChange:{type:Boolean,default:!0}},emits:["onTourStart","onTourEnd","onTourStep"],setup(e,{expose:o,emit:r}){const t=e,O=r,T=a.computed(()=>t.name?`vjt-${t.name}`:"vjt-tour"),h=a.ref(),l=a.ref(0),c=a.ref(0),m=a.ref(1),g=a.computed(()=>t.steps[l.value]),he=a.computed(()=>t.steps[c.value]),ye=a.computed(()=>t.steps[m.value]),M=a.reactive({currentStep:l,lastStep:c,nextStep:m,getCurrentStep:g,getLastStep:he,getNextStep:ye}),z=a.computed(()=>l.value===t.steps.length-1),R=a.computed(()=>z.value?t.buttonLabels?.done??"Done":t.buttonLabels?.next??"Next"),w=a.ref(""),u=a.ref(!1),A=a.ref(!1),be=a.ref("right"),p=a.ref(!1),D=a.computed(()=>t.name?`vjt-${t.name}`:"vjt"),$=a.computed(()=>`${D.value}-vjt-tooltip`),F=a.computed(()=>`${D.value}-vjt-backdrop`),Se=a.computed(()=>`${D.value}-vjt-arrow`),y=a.computed(()=>t.name?`${t.name}vjt-highlight`:"vjt-highlight"),v=a.ref(),H=a.ref();let E=null;const U={duration:500,offset:-100},C=()=>localStorage.getItem(T.value)==="true",L=a.reactive({name:void 0,stepsRef:null}),x=async()=>{if(!C()){if(u.value){const n=t.name!==L.name,i=t.steps!==L.stepsRef;if(!(n||i))return;b(),await a.nextTick()}if(t.saveToLocalStorage==="step"){const n=localStorage.getItem(T.value);l.value=parseInt(n||"0",10),l.value>0&&(c.value=Math.max(l.value-1,0),m.value=l.value+1)}else l.value=0;V=setTimeout(async()=>{await I(l.value);const n=g.value;if(!n){console.warn("No step data available");return}const i=document.querySelector(n.target);if(!i){console.warn(`Tour target element not found: ${n.target}`);return}if(await new Promise(s=>{Q=setTimeout(s,t.teleportDelay)}),v.value||(v.value=document.querySelector(`#${$.value}`)),H.value||(H.value=document.querySelector(`#${F.value}`)),!v.value){console.warn("Tooltip element not found in DOM");return}t.enableA11y&&typeof document<"u"&&(E=document.activeElement),u.value=!0,p.value=!0,await a.nextTick();{const s=t.highlight||n.highlight,d=t.margin||(s?14:8);h.value=te.createPopper(i,v.value,{position:n.placement||t.defaultPlacement,margin:d})}await k(),p.value=!1,t.enableA11y&&(await a.nextTick(),v.value?.focus()),L.name=t.name,L.stepsRef=t.steps,O("onTourStart")},t.startDelay)}},b=()=>{clearTimeout(V),clearTimeout(Q),u.value=!1,A.value=!1,p.value=!1,document.querySelectorAll(`.${y.value}`).forEach(n=>n.classList.remove(y.value)),h.value&&(h.value=void 0),t.enableA11y&&E&&(E.focus(),E=null)},Te=(n=!1)=>{b(),l.value=0,c.value=0,m.value=1,localStorage.removeItem(T.value),n&&x()},B=async()=>{if(await I(m.value),p.value=!0,c.value=l.value,l.value++,l.value>t.steps.length-1){S();return}m.value=l.value+1,await k(),p.value=!1},j=async()=>{if(await I(c.value),p.value=!0,l.value=c.value,c.value=Math.max(c.value-1,0),l.value<0){S();return}m.value=l.value+1,await k(),p.value=!1},S=()=>{b(),t.saveToLocalStorage!=="never"&&localStorage.setItem(T.value,"true"),O("onTourEnd")},ke=async n=>{if(n<0||n>=t.steps.length){console.warn(`Invalid step index: ${n}`);return}await I(n),p.value=!0,l.value=n,c.value=Math.max(n-1,0),m.value=n+1,await k(),p.value=!1},I=async n=>{const i=t.steps[n];i?.onBefore&&await i.onBefore()},we=n=>{!n||!v.value||(v.value.setAttribute("data-arrow",n),be.value=n)},G=()=>{const n=g.value;if(!n||!h.value)return;const i=document.querySelector(n.target);if(!i)return;J(),K();const s=h.value.update({reference:i,position:n.placement||t.defaultPlacement});we(s||t.defaultPlacement)},k=async()=>{const n=g.value;if(!n)return;const i=document.querySelector(n.target);!i||!v.value||!h.value||(!t.noScroll&&!n.noScroll&&await new Promise(s=>{const d={duration:U.duration,offset:U.offset,easing:"easeInOutQuad",a11y:t.enableA11y,...t.jumpOptions,...n.jumpOptions},_=re[d.easing]||q;ae(i,{duration:d.duration,offset:d.offset,easing:_,a11y:d.a11y,callback:()=>s()})}),G(),t.saveToLocalStorage==="step"&&localStorage.setItem(T.value,l.value.toString()),n.onAfter&&await n.onAfter(),O("onTourStep",l.value))},J=()=>{document.querySelectorAll(`.${y.value}`).forEach(s=>s.classList.remove(y.value));const n=g.value;if(!n||!t.highlight&&!n.highlight){w.value="";return}const i=document.querySelector(n.target);i&&(i.classList.add(y.value),w.value=$e(`.${y.value}`))},K=()=>{const n=g.value,i=t.backdrop||!!n?.backdrop;A.value=i},N=()=>{C()||u.value&&G()};let P,V,Q;const W=()=>{C()||(clearTimeout(P),N(),P=setTimeout(()=>{N()},t.resizeTimeout))};function $e(n){if(typeof document>"u")return"";const i=document.querySelector(n);if(!i)return"";const s=i.getBoundingClientRect();return`polygon(
    0% 0%,
    0% 100%,
    ${s.left}px 100%,
    ${s.left}px ${s.top}px,
    ${s.right}px ${s.top}px,
    ${s.right}px ${s.bottom}px,
    ${s.left}px ${s.bottom}px,
    ${s.left}px 100%,
    100% 100%,
    100% 0%
  )`}w.value="";const X=()=>{C()||u.value&&N()},Y=n=>{if(!(!u.value||!t.enableA11y||!t.keyboardNav))switch(n.key){case"Escape":S(),n.preventDefault();break;case"ArrowRight":case"Enter":if(n.key==="Enter"&&n.target?.tagName==="BUTTON")return;B(),n.preventDefault();break;case"ArrowLeft":l.value>0&&(j(),n.preventDefault());break}};return a.onMounted(()=>{t.keyboardNav&&window.addEventListener("keydown",Y),t.autoStart&&x(),window.addEventListener("resize",W),window.addEventListener("scroll",X,!0)}),a.onUnmounted(()=>{t.keyboardNav&&window.removeEventListener("keydown",Y),window.removeEventListener("resize",W),window.removeEventListener("scroll",X,!0),clearTimeout(P),clearTimeout(V),clearTimeout(Q),u.value&&b()}),a.watch(()=>[t.name,t.steps,t.restartOnPropChange],async([n,i,s],[d,_])=>{if(!s||!u.value)return;const Z=n!==d;if(Z||i!==_){if(Z&&d!==void 0){const ee=d?`vjt-highlight-${d}`:"vjt-highlight";document.querySelectorAll(`.${ee}`).forEach(Ee=>Ee.classList.remove(ee))}b(),await a.nextTick(),x()}}),o({startTour:x,nextStep:B,lastStep:j,endTour:S,stopTour:b,goToStep:ke,resetTour:Te,updatePosition:k,updateHighlight:J,updateBackdrop:K}),(n,i)=>(a.openBlock(),a.createBlock(a.Teleport,{to:"body"},[a.createElementVNode("div",{class:a.normalizeClass(["vjt-modal-overlay",{"vjt-tour-active":u.value}]),"data-hidden":!u.value},[a.createElementVNode("div",{id:F.value,"data-hidden":!A.value,style:a.normalizeStyle({"clip-path":w.value})},null,12,ie),a.createElementVNode("div",{id:$.value,ref_key:"_Tooltip",ref:v,role:"dialog","aria-modal":e.enableA11y?"true":void 0,"aria-label":g.value?.ariaLabel||e.ariaLabel,"aria-describedby":`${$.value}-content`,tabindex:e.enableA11y?"0":void 0,"data-hidden":!u.value||p.value},[u.value?(a.openBlock(),a.createElementBlock("div",{key:`step-${l.value}`},[e.enableA11y?(a.openBlock(),a.createElementBlock("div",ue," Step "+a.toDisplayString(l.value+1)+" of "+a.toDisplayString(t.steps.length),1)):a.createCommentVNode("",!0),e.hideArrow?a.createCommentVNode("",!0):(a.openBlock(),a.createElementBlock("div",{key:1,id:Se.value},null,8,ce)),a.renderSlot(n.$slots,"content",{currentStepIndex:l.value,currentStepData:g.value},()=>[a.createElementVNode("div",{id:`${$.value}-content`,innerHTML:M.getCurrentStep?.content},null,8,de)]),a.renderSlot(n.$slots,"actions",{lastStep:j,nextStep:B,endTour:S,getNextLabel:R.value,props:t,_CurrentStep:M},()=>[a.createElementVNode("div",pe,[c.value<l.value?(a.openBlock(),a.createElementBlock("button",{key:0,type:"button",onClick:a.withModifiers(j,["prevent"]),"aria-label":e.enableA11y?`Go to previous step, step ${l.value} of ${t.steps.length}`:void 0},a.toDisplayString(t.buttonLabels?.back||"Back"),9,fe)):a.createCommentVNode("",!0),t.hideSkip?a.createCommentVNode("",!0):(a.openBlock(),a.createElementBlock("button",{key:1,type:"button",onClick:a.withModifiers(S,["prevent"]),"aria-label":e.enableA11y?"Skip tour and close":void 0},a.toDisplayString(t.buttonLabels?.skip||"Skip"),9,me)),a.createElementVNode("button",{type:"button",onClick:a.withModifiers(B,["prevent"]),"aria-label":e.enableA11y?z.value?"Finish tour":`Go to next step, step ${m.value+1} of ${t.steps.length}`:void 0},a.toDisplayString(R.value),9,ve)])])])):a.createCommentVNode("",!0)],8,se)],10,le)]))}});f.VTour=ge,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=vuejs-tour.umd.cjs.map