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