UNPKG

v-onboarding

Version:

A fully-typed, customizable onboarding component for Vue 3

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