vue3-tut
Version:
vue3-tut is a super-slim, fully-typed onboarding component for Vue 3
12 lines (11 loc) • 22.3 kB
JavaScript
(function(j,nt){typeof exports=="object"&&typeof module!="undefined"?nt(exports,require("@popperjs/core"),require("vue"),require("focus-trap")):typeof define=="function"&&define.amd?define(["exports","@popperjs/core","vue","focus-trap"],nt):(j=typeof globalThis!="undefined"?globalThis:j||self,nt(j["vue-tutorial"]={},j.core,j.Vue,j.focusTrap))})(this,function(j,nt,o,le){"use strict";const Pt=Symbol("onboardingState"),rt={IDLE:-1,FINISHED:-2},ct={BACKWARD:-1,FORWARD:1};function ce(r){return o.getCurrentScope()?(o.onScopeDispose(r),!0):!1}function ue(r){return typeof r=="function"?r():o.unref(r)}typeof WorkerGlobalScope!="undefined"&&globalThis instanceof WorkerGlobalScope;function fe(r){var d;const s=ue(r);return(d=s==null?void 0:s.$el)!=null?d:s}function de(r,d={}){let s;const{immediate:c,...m}=d,u=o.ref(!1),b=o.ref(!1),_=g=>s&&s.activate(g),C=g=>s&&s.deactivate(g),A=()=>{s&&(s.pause(),b.value=!0)},v=()=>{s&&(s.unpause(),b.value=!1)};return o.watch(()=>fe(r),g=>{!g||(s=le.createFocusTrap(g,{...m,onActivate(){u.value=!0,d.onActivate&&d.onActivate()},onDeactivate(){u.value=!1,d.onDeactivate&&d.onDeactivate()}}),c&&_())},{flush:"post"}),ce(()=>C()),{hasFocus:u,isPaused:b,activate:_,deactivate:C,pause:A,unpause:v}}var ut=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Tt={exports:{}};(function(r,d){var s=200,c="__lodash_hash_undefined__",m=800,u=16,b=9007199254740991,_="[object Arguments]",C="[object Array]",A="[object AsyncFunction]",v="[object Boolean]",g="[object Date]",w="[object Error]",$="[object Function]",L="[object GeneratorFunction]",F="[object Map]",K="[object Number]",Z="[object Null]",E="[object Object]",a="[object Proxy]",l="[object RegExp]",B="[object Set]",N="[object String]",h="[object Undefined]",V="[object WeakMap]",H="[object ArrayBuffer]",k="[object DataView]",P="[object Float32Array]",x="[object Float64Array]",M="[object Int8Array]",z="[object Int16Array]",R="[object Int32Array]",U="[object Uint8Array]",q="[object Uint8ClampedArray]",Pe="[object Uint16Array]",De="[object Uint32Array]",je=/[\\^$.*+?()[\]{}|]/g,Le=/^\[object .+?Constructor\]$/,Fe=/^(?:0|[1-9]\d*)$/,T={};T[P]=T[x]=T[M]=T[z]=T[R]=T[U]=T[q]=T[Pe]=T[De]=!0,T[_]=T[C]=T[H]=T[v]=T[k]=T[g]=T[w]=T[$]=T[F]=T[K]=T[E]=T[l]=T[B]=T[N]=T[V]=!1;var Ft=typeof ut=="object"&&ut&&ut.Object===Object&&ut,He=typeof self=="object"&&self&&self.Object===Object&&self,ot=Ft||He||Function("return this")(),Ht=d&&!d.nodeType&&d,it=Ht&&!0&&r&&!r.nodeType&&r,kt=it&&it.exports===Ht,St=kt&&Ft.process,Mt=function(){try{var t=it&&it.require&&it.require("util").types;return t||St&&St.binding&&St.binding("util")}catch{}}(),zt=Mt&&Mt.isTypedArray;function ke(t,e,n){switch(n.length){case 0:return t.call(e);case 1:return t.call(e,n[0]);case 2:return t.call(e,n[0],n[1]);case 3:return t.call(e,n[0],n[1],n[2])}return t.apply(e,n)}function Me(t,e){for(var n=-1,i=Array(t);++n<t;)i[n]=e(n);return i}function ze(t){return function(e){return t(e)}}function Re(t,e){return t==null?void 0:t[e]}function Ue(t,e){return function(n){return t(e(n))}}var Ge=Array.prototype,We=Function.prototype,pt=Object.prototype,Ot=ot["__core-js_shared__"],ht=We.toString,G=pt.hasOwnProperty,Rt=function(){var t=/[^.]+$/.exec(Ot&&Ot.keys&&Ot.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),Ut=pt.toString,Ke=ht.call(Object),qe=RegExp("^"+ht.call(G).replace(je,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),gt=kt?ot.Buffer:void 0,Gt=ot.Symbol,Wt=ot.Uint8Array,Kt=gt?gt.allocUnsafe:void 0,qt=Ue(Object.getPrototypeOf,Object),Qt=Object.create,Qe=pt.propertyIsEnumerable,Ze=Ge.splice,J=Gt?Gt.toStringTag:void 0,vt=function(){try{var t=Ct(Object,"defineProperty");return t({},"",{}),t}catch{}}(),Je=gt?gt.isBuffer:void 0,Zt=Math.max,Ye=Date.now,Jt=Ct(ot,"Map"),at=Ct(Object,"create"),Xe=function(){function t(){}return function(e){if(!X(e))return{};if(Qt)return Qt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();function Y(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function tn(){this.__data__=at?at(null):{},this.size=0}function en(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function nn(t){var e=this.__data__;if(at){var n=e[t];return n===c?void 0:n}return G.call(e,t)?e[t]:void 0}function rn(t){var e=this.__data__;return at?e[t]!==void 0:G.call(e,t)}function on(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=at&&e===void 0?c:e,this}Y.prototype.clear=tn,Y.prototype.delete=en,Y.prototype.get=nn,Y.prototype.has=rn,Y.prototype.set=on;function W(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function an(){this.__data__=[],this.size=0}function sn(t){var e=this.__data__,n=bt(e,t);if(n<0)return!1;var i=e.length-1;return n==i?e.pop():Ze.call(e,n,1),--this.size,!0}function ln(t){var e=this.__data__,n=bt(e,t);return n<0?void 0:e[n][1]}function cn(t){return bt(this.__data__,t)>-1}function un(t,e){var n=this.__data__,i=bt(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}W.prototype.clear=an,W.prototype.delete=sn,W.prototype.get=ln,W.prototype.has=cn,W.prototype.set=un;function tt(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function fn(){this.size=0,this.__data__={hash:new Y,map:new(Jt||W),string:new Y}}function dn(t){var e=mt(this,t).delete(t);return this.size-=e?1:0,e}function pn(t){return mt(this,t).get(t)}function hn(t){return mt(this,t).has(t)}function gn(t,e){var n=mt(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}tt.prototype.clear=fn,tt.prototype.delete=dn,tt.prototype.get=pn,tt.prototype.has=hn,tt.prototype.set=gn;function et(t){var e=this.__data__=new W(t);this.size=e.size}function vn(){this.__data__=new W,this.size=0}function bn(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function yn(t){return this.__data__.get(t)}function mn(t){return this.__data__.has(t)}function _n(t,e){var n=this.__data__;if(n instanceof W){var i=n.__data__;if(!Jt||i.length<s-1)return i.push([t,e]),this.size=++n.size,this;n=this.__data__=new tt(i)}return n.set(t,e),this.size=n.size,this}et.prototype.clear=vn,et.prototype.delete=bn,et.prototype.get=yn,et.prototype.has=mn,et.prototype.set=_n;function Tn(t,e){var n=$t(t),i=!n&&wt(t),p=!n&&!i&&ne(t),y=!n&&!i&&!p&&oe(t),S=n||i||p||y,f=S?Me(t.length,String):[],O=f.length;for(var D in t)(e||G.call(t,D))&&!(S&&(D=="length"||p&&(D=="offset"||D=="parent")||y&&(D=="buffer"||D=="byteLength"||D=="byteOffset")||te(D,O)))&&f.push(D);return f}function Et(t,e,n){(n!==void 0&&!_t(t[e],n)||n===void 0&&!(e in t))&&Bt(t,e,n)}function Sn(t,e,n){var i=t[e];(!(G.call(t,e)&&_t(i,n))||n===void 0&&!(e in t))&&Bt(t,e,n)}function bt(t,e){for(var n=t.length;n--;)if(_t(t[n][0],e))return n;return-1}function Bt(t,e,n){e=="__proto__"&&vt?vt(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var On=jn();function yt(t){return t==null?t===void 0?h:Z:J&&J in Object(t)?Ln(t):Rn(t)}function Yt(t){return st(t)&&yt(t)==_}function En(t){if(!X(t)||Mn(t))return!1;var e=Vt(t)?qe:Le;return e.test(Kn(t))}function Bn(t){return st(t)&&re(t.length)&&!!T[yt(t)]}function Cn(t){if(!X(t))return zn(t);var e=ee(t),n=[];for(var i in t)i=="constructor"&&(e||!G.call(t,i))||n.push(i);return n}function Xt(t,e,n,i,p){t!==e&&On(e,function(y,S){if(p||(p=new et),X(y))An(t,e,S,n,Xt,i,p);else{var f=i?i(At(t,S),y,S+"",t,e,p):void 0;f===void 0&&(f=y),Et(t,S,f)}},ie)}function An(t,e,n,i,p,y,S){var f=At(t,n),O=At(e,n),D=S.get(O);if(D){Et(t,n,D);return}var I=y?y(f,O,n+"",t,e,S):void 0,lt=I===void 0;if(lt){var xt=$t(O),It=!xt&&ne(O),se=!xt&&!It&&oe(O);I=O,xt||It||se?$t(f)?I=f:qn(f)?I=In(f):It?(lt=!1,I=Nn(O,!0)):se?(lt=!1,I=xn(O,!0)):I=[]:Qn(O)||wt(O)?(I=f,wt(f)?I=Zn(f):(!X(f)||Vt(f))&&(I=Fn(O))):lt=!1}lt&&(S.set(O,I),p(I,O,i,y,S),S.delete(O)),Et(t,n,I)}function wn(t,e){return Gn(Un(t,e,ae),t+"")}var $n=vt?function(t,e){return vt(t,"toString",{configurable:!0,enumerable:!1,value:Yn(e),writable:!0})}:ae;function Nn(t,e){if(e)return t.slice();var n=t.length,i=Kt?Kt(n):new t.constructor(n);return t.copy(i),i}function Vn(t){var e=new t.constructor(t.byteLength);return new Wt(e).set(new Wt(t)),e}function xn(t,e){var n=e?Vn(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function In(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function Pn(t,e,n,i){var p=!n;n||(n={});for(var y=-1,S=e.length;++y<S;){var f=e[y],O=i?i(n[f],t[f],f,n,t):void 0;O===void 0&&(O=t[f]),p?Bt(n,f,O):Sn(n,f,O)}return n}function Dn(t){return wn(function(e,n){var i=-1,p=n.length,y=p>1?n[p-1]:void 0,S=p>2?n[2]:void 0;for(y=t.length>3&&typeof y=="function"?(p--,y):void 0,S&&Hn(n[0],n[1],S)&&(y=p<3?void 0:y,p=1),e=Object(e);++i<p;){var f=n[i];f&&t(e,f,i,y)}return e})}function jn(t){return function(e,n,i){for(var p=-1,y=Object(e),S=i(e),f=S.length;f--;){var O=S[t?f:++p];if(n(y[O],O,y)===!1)break}return e}}function mt(t,e){var n=t.__data__;return kn(e)?n[typeof e=="string"?"string":"hash"]:n.map}function Ct(t,e){var n=Re(t,e);return En(n)?n:void 0}function Ln(t){var e=G.call(t,J),n=t[J];try{t[J]=void 0;var i=!0}catch{}var p=Ut.call(t);return i&&(e?t[J]=n:delete t[J]),p}function Fn(t){return typeof t.constructor=="function"&&!ee(t)?Xe(qt(t)):{}}function te(t,e){var n=typeof t;return e=e==null?b:e,!!e&&(n=="number"||n!="symbol"&&Fe.test(t))&&t>-1&&t%1==0&&t<e}function Hn(t,e,n){if(!X(n))return!1;var i=typeof e;return(i=="number"?Nt(n)&&te(e,n.length):i=="string"&&e in n)?_t(n[e],t):!1}function kn(t){var e=typeof t;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?t!=="__proto__":t===null}function Mn(t){return!!Rt&&Rt in t}function ee(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||pt;return t===n}function zn(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Rn(t){return Ut.call(t)}function Un(t,e,n){return e=Zt(e===void 0?t.length-1:e,0),function(){for(var i=arguments,p=-1,y=Zt(i.length-e,0),S=Array(y);++p<y;)S[p]=i[e+p];p=-1;for(var f=Array(e+1);++p<e;)f[p]=i[p];return f[e]=n(S),ke(t,this,f)}}function At(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var Gn=Wn($n);function Wn(t){var e=0,n=0;return function(){var i=Ye(),p=u-(i-n);if(n=i,p>0){if(++e>=m)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function Kn(t){if(t!=null){try{return ht.call(t)}catch{}try{return t+""}catch{}}return""}function _t(t,e){return t===e||t!==t&&e!==e}var wt=Yt(function(){return arguments}())?Yt:function(t){return st(t)&&G.call(t,"callee")&&!Qe.call(t,"callee")},$t=Array.isArray;function Nt(t){return t!=null&&re(t.length)&&!Vt(t)}function qn(t){return st(t)&&Nt(t)}var ne=Je||Xn;function Vt(t){if(!X(t))return!1;var e=yt(t);return e==$||e==L||e==A||e==a}function re(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=b}function X(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function st(t){return t!=null&&typeof t=="object"}function Qn(t){if(!st(t)||yt(t)!=E)return!1;var e=qt(t);if(e===null)return!0;var n=G.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&ht.call(n)==Ke}var oe=zt?ze(zt):Bn;function Zn(t){return Pn(t,ie(t))}function ie(t){return Nt(t)?Tn(t,!0):Cn(t)}var Jn=Dn(function(t,e,n){Xt(t,e,n)});function Yn(t){return function(){return t}}function ae(t){return t}function Xn(){return!1}r.exports=Jn})(Tt,Tt.exports);var ft=Tt.exports;function Q(r){return typeof r=="string"?document.querySelector(r):typeof r=="function"?r():null}const dt={popper:{},overlay:{enabled:!0,padding:0,borderRadius:0,preventOverlayInteraction:!0},scrollToStep:{enabled:!0,options:{behavior:"smooth",block:"center",inline:"center"}},autoFinishByExit:!0,labels:{previousButton:"Previous",nextButton:"Next",finishButton:"Finish"},hideButtons:{previous:!1,next:!1,exit:!1},hideNextStepDuringHook:!1};function pe(){var b,_,C,A;const r=o.ref(""),d=o.ref(null),s=o.ref((_=(b=dt.overlay)==null?void 0:b.padding)!=null?_:0),c=o.ref((A=(C=dt.overlay)==null?void 0:C.borderRadius)!=null?A:0),m=()=>{u(d.value,{padding:s.value,borderRadius:c.value})},u=async(v,g=dt.overlay)=>{var N,h,V,H,k,P,x,M,z,R,U,q;if(!v)return;const{innerWidth:w,innerHeight:$}=window,{left:L,top:F,width:K,height:Z}=v.getBoundingClientRect(),E=typeof g.padding=="number"?{top:g.padding,right:g.padding,bottom:g.padding,left:g.padding}:g.padding,a=typeof g.borderRadius=="number"?{leftTop:g.borderRadius,rightTop:g.borderRadius,rightBottom:g.borderRadius,leftBottom:g.borderRadius}:g.borderRadius,l={top:F-((N=E==null?void 0:E.top)!=null?N:0),right:L+K+((h=E==null?void 0:E.right)!=null?h:0),bottom:F+Z+((V=E==null?void 0:E.bottom)!=null?V:0),left:L-((H=E==null?void 0:E.left)!=null?H:0)},B={leftTop:`M${l.left+((k=a==null?void 0:a.leftTop)!=null?k:0)},${l.top} Q${l.left},${l.top} ${l.left},${l.top+((P=a==null?void 0:a.leftTop)!=null?P:0)}`,rightTop:`V${l.top+((x=a==null?void 0:a.rightTop)!=null?x:0)} Q${l.right},${l.top} ${l.right-((M=a==null?void 0:a.rightTop)!=null?M:0)},${l.top}`,rightBottom:`H${l.right-((z=a==null?void 0:a.rightBottom)!=null?z:0)} Q${l.right},${l.bottom} ${l.right},${l.bottom-((R=a==null?void 0:a.rightBottom)!=null?R:0)}`,leftBottom:`V${l.bottom-((U=a==null?void 0:a.leftBottom)!=null?U:0)} Q${l.left},${l.bottom} ${l.left+((q=a==null?void 0:a.leftBottom)!=null?q:0)},${l.bottom}`};r.value=`
M${w},${$}
H0V0
H${w}V${$}
Z
${B.leftTop}
${B.leftBottom}
${B.rightBottom}
${B.rightTop}
Z
`,d.value=v,s.value=E,c.value=a};return o.onMounted(()=>{window.addEventListener("scroll",m),window.addEventListener("resize",m)}),o.onUnmounted(()=>{window.removeEventListener("scroll",m),window.removeEventListener("resize",m)}),{path:r,updatePath:u}}var Dt=(r,d)=>{const s=r.__vccOpts||r;for(const[c,m]of d)s[c]=m;return s};const he=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),d=o.inject(Pt,{}),{step:s,isFirstStep:c,isLastStep:m,options:u,next:b,previous:_,exit:C,finish:A}=d.value,v=o.computed(()=>ft({},u==null?void 0:u.value,s.value.options)),g=o.computed(()=>{var a,l,B;return{previous:!((a=v.value.hideButtons)!=null&&a.previous),next:!((l=v.value.hideButtons)!=null&&l.next),exit:!((B=v.value.hideButtons)!=null&&B.exit)}}),w=o.computed(()=>{var a,l,B,N,h,V;return{previous:(l=(a=v.value)==null?void 0:a.labels)==null?void 0:l.previousButton,next:(N=(B=v.value)==null?void 0:B.labels)==null?void 0:N.nextButton,finish:(V=(h=v.value)==null?void 0:h.labels)==null?void 0:V.finishButton}}),{updatePath:$,path:L}=pe(),F=o.ref(),K=de(F);o.watch(r,async a=>{var l,B;await o.nextTick(),a&&((B=(l=v.value)==null?void 0:l.overlay)==null?void 0:B.preventOverlayInteraction)?(console.log("focusTrap.activate()",a),K.activate()):K.deactivate()});const Z=async()=>{var l,B,N,h,V,H,k,P,x,M,z,R,U;await o.nextTick();const a=Q((B=(l=s==null?void 0:s.value)==null?void 0:l.attachTo)==null?void 0:B.element);a&&F.value&&(r.value=!0,(h=(N=v.value)==null?void 0:N.scrollToStep)!=null&&h.enabled&&((k=a.scrollIntoView)==null||k.call(a,(H=(V=v.value)==null?void 0:V.scrollToStep)==null?void 0:H.options)),nt.createPopper(a,F.value,v.value.popper),(x=(P=v.value)==null?void 0:P.overlay)!=null&&x.enabled&&$(a,{padding:(z=(M=v.value)==null?void 0:M.overlay)==null?void 0:z.padding,borderRadius:(U=(R=v.value)==null?void 0:R.overlay)==null?void 0:U.borderRadius}))};return o.watch(s,Z,{immediate:!0}),{stepElement:F,next:b,previous:_,path:L,show:r,step:s,isFirstStep:c,isLastStep:m,exit:()=>{var a;C(),(a=v.value)!=null&&a.autoFinishByExit&&A()},finish:A,isButtonVisible:g,buttonLabels:w}}}),ge={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",fill:"var(--v-onboarding-overlay-fill, black)",opacity:"var(--v-onboarding-overlay-opacity, 0.5)","z-index":"var(--v-onboarding-overlay-z, 10)","pointer-events":"none"}},ve=["d"],be={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},ye={class:"v-onboarding-item"},me={class:"v-onboarding-item__header"},_e={key:0,class:"v-onboarding-item__header-title"},Te=[o.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-4 w-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[o.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1)],Se=["innerHTML"],Oe={key:1,class:"v-onboarding-item__description"},Ee={class:"v-onboarding-item__actions"},Be=o.createElementVNode("div",{"data-popper-arrow":""},null,-1);function Ce(r,d,s,c,m,u){return o.withDirectives((o.openBlock(),o.createElementBlock("div",null,[(o.openBlock(),o.createElementBlock("svg",ge,[o.createElementVNode("path",{d:r.path},null,8,ve)])),o.createElementVNode("div",be,[r.step?o.renderSlot(r.$slots,"default",{key:0},()=>[o.createElementVNode("div",ye,[o.createElementVNode("div",me,[r.step.content.title?(o.openBlock(),o.createElementBlock("span",_e,o.toDisplayString(r.step.content.title),1)):o.createCommentVNode("",!0),r.isButtonVisible.exit?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:d[0]||(d[0]=(...b)=>r.exit&&r.exit(...b)),"aria-label":"Close",class:"v-onboarding-item__header-close"},Te)):o.createCommentVNode("",!0)]),r.step.content.description&&r.step.content.html?(o.openBlock(),o.createElementBlock("p",{key:0,class:"v-onboarding-item__description",innerHTML:r.step.content.description},null,8,Se)):r.step.content.description?(o.openBlock(),o.createElementBlock("p",Oe,o.toDisplayString(r.step.content.description),1)):o.createCommentVNode("",!0),o.createElementVNode("div",Ee,[!r.isFirstStep&&r.isButtonVisible.previous?(o.openBlock(),o.createElementBlock("button",{key:0,type:"button",onClick:d[1]||(d[1]=(...b)=>r.previous&&r.previous(...b)),class:"v-onboarding-btn-secondary"},o.toDisplayString(r.buttonLabels.previous),1)):o.createCommentVNode("",!0),r.isButtonVisible.next?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:d[2]||(d[2]=()=>r.isLastStep?r.finish():r.next()),type:"button",class:"v-onboarding-btn-primary"},o.toDisplayString(r.isLastStep?r.buttonLabels.finish:r.buttonLabels.next),1)):o.createCommentVNode("",!0)])])]):o.createCommentVNode("",!0),Be],512)],512)),[[o.vShow,r.show]])}var jt=Dt(he,[["render",Ce]]);const Ae=o.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:jt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(r,{expose:d,emit:s}){const c=o.computed(()=>ft({},dt,r.options)),m=o.ref(!0),u=o.ref(rt.IDLE),b=o.ref(u.value),_=h=>{typeof h=="function"?u.value=h(u.value):u.value=h},C=o.computed(()=>{var h;return(h=r.steps)==null?void 0:h[b.value]}),A=o.computed(()=>C.value?ft({},c.value,C.value.options):c.value),v=h=>ft({},c.value,h.options),{beforeHook:g,afterHook:w}=$e(A);o.watch(u,async(h,V)=>{var M,z,R,U;const H=h<V?ct.BACKWARD:ct.FORWARD,k={direction:H,isForward:H===ct.FORWARD,isBackward:H===ct.BACKWARD},P=(M=r.steps)==null?void 0:M[V];if(P){const q={...k,index:V,step:P};L(Q(P.attachTo.element)),await w(P,q)}const x=(z=r.steps)==null?void 0:z[h];if(x){const q={...k,index:h,step:x};L(Q(x.attachTo.element)),(R=v(x))!=null&&R.hideNextStepDuringHook&&(m.value=!1),await g(x,q)}b.value=h,m.value=!0,L(Q("body")),(U=A.value.overlay)!=null&&U.preventOverlayInteraction&&F()});const{addPointerEvents:$,removePointerEvents:L}=Lt(),F=()=>{const h=Q("body");!h||([rt.IDLE,rt.FINISHED].includes(b.value)?L(h):$(h,"none"))},K=o.computed(()=>b.value===rt.FINISHED),Z=()=>_(0),E=()=>{_(rt.FINISHED),s("finish")},a=()=>s("exit");d({start:Z,finish:E,goToStep:_});const l=()=>{_(h=>h-1)},B=()=>{const h=b.value+1;if(h===r.steps.length){E();return}_(h)},N=o.computed(()=>({step:C,options:c,next:B,previous:l,finish:E,exit:a,isFirstStep:o.computed(()=>b.value===0),isLastStep:o.computed(()=>b.value===r.steps.length-1)}));return o.provide(Pt,N),{index:u,activeStep:C,next:B,previous:l,isFinished:K,setIndex:_,isFirstStep:N.value.isFirstStep,isLastStep:N.value.isLastStep,finish:E,exit:a,showStep:m}}});function we(){return{setClassName:({element:s,classList:c=[]})=>{!s||s.classList.add(...c)},unsetClassName:({element:s,classList:c=[]})=>{!s||s.classList.remove(...c)}}}function Lt(){const r="data-v-onboarding-pointer-events";return{addPointerEvents:(c,m="auto")=>{if(!c)return;const u=c.style.pointerEvents;u&&c.setAttribute(r,u),c.style.setProperty("pointer-events",m)},removePointerEvents:c=>{if(!c)return;const m=c.getAttribute(r);m?(c.style.setProperty("pointer-events",m),c.removeAttribute(r)):c.style.removeProperty("pointer-events")}}}function $e(r){const{setClassName:d,unsetClassName:s}=we(),{addPointerEvents:c,removePointerEvents:m}=Lt();return{beforeHook:(_,C)=>{var v,g,w,$;const A=Q(_.attachTo.element);return(g=(v=r.value)==null?void 0:v.overlay)!=null&&g.preventOverlayInteraction&&c(A),d({element:A,classList:_.attachTo.classList}),($=(w=_.on)==null?void 0:w.beforeStep)==null?void 0:$.call(w,C)},afterHook:(_,C)=>{var v,g,w,$;const A=Q(_.attachTo.element);return(g=(v=r.value)==null?void 0:v.overlay)!=null&&g.preventOverlayInteraction&&m(A),s({element:A,classList:_.attachTo.classList}),($=(w=_.on)==null?void 0:w.afterStep)==null?void 0:$.call(w,C)}}}const Ne={key:0,"data-v-onboarding-wrapper":"",style:{"pointer-events":"auto"}};function Ve(r,d,s,c,m,u){const b=o.resolveComponent("VOnboardingStep");return r.isFinished?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",Ne,[r.showStep?o.renderSlot(r.$slots,"default",{key:r.index,step:r.activeStep,next:r.next,previous:r.previous,exit:r.exit,isFirst:r.isFirstStep,isLast:r.isLastStep,index:r.index},()=>[(o.openBlock(),o.createBlock(b,{key:r.index}))]):o.createCommentVNode("",!0)]))}var xe=Dt(Ae,[["render",Ve]]);function Ie(r){return{start:()=>{var u;return(u=r==null?void 0:r.value)==null?void 0:u.start()},finish:()=>{var u;return(u=r==null?void 0:r.value)==null?void 0:u.finish()},exit:()=>{var u;return(u=r==null?void 0:r.value)==null?void 0:u.exit()},goToStep:u=>{var b;return(b=r==null?void 0:r.value)==null?void 0:b.goToStep(u)}}}var er="";j.VOnboardingStep=jt,j.VOnboardingWrapper=xe,j.useVOnboarding=Ie,Object.defineProperties(j,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});