UNPKG

v-onboarding

Version:

v-onboarding is a super-slim, fully-typed onboarding component for Vue 3

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