Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

v-onboarding

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

v-onboarding - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

8

dist/v-onboarding.es.js
import { createPopper } from "@popperjs/core";
import { ref, onMounted, onUnmounted, defineComponent, inject, toRefs, computed, watch, nextTick, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, provide, resolveComponent, createBlock } from "vue";
import { ref, onMounted, onUnmounted, defineComponent, inject, computed, watch, nextTick, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, provide, resolveComponent, createBlock } from "vue";
const STATE_INJECT_KEY = Symbol("onboardingState");

@@ -799,3 +799,3 @@ const OnboardingState = {

const state = inject(STATE_INJECT_KEY, {});
const { step, isFirstStep, isLastStep, options, next, previous, exit: stateExit, finish } = toRefs(state.value);
const { step, isFirstStep, isLastStep, options, next, previous, exit: stateExit, finish } = state.value;
const mergedOptions = computed(() => merge({}, options == null ? void 0 : options.value, step.value.options));

@@ -841,5 +841,5 @@ const isButtonVisible = computed(() => {

var _a;
stateExit.value();
stateExit();
if ((_a = mergedOptions.value) == null ? void 0 : _a.autoFinishByExit) {
finish.value();
finish();
}

@@ -846,0 +846,0 @@ };

@@ -11,3 +11,3 @@ (function(E,Y){typeof exports=="object"&&typeof module!="undefined"?Y(exports,require("@popperjs/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@popperjs/core","vue"],Y):(E=typeof globalThis!="undefined"?globalThis:E||self,Y(E["v-onboarding"]={},E.core,E.Vue))})(this,function(E,Y,o){"use strict";const Nt=Symbol("onboardingState"),mt={IDLE:-1,FINISHED:-2};var ot=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},vt={exports:{}};(function(r,b){var p=200,m="__lodash_hash_undefined__",f=800,s=16,v=9007199254740991,N="[object Arguments]",V="[object Array]",I="[object AsyncFunction]",T="[object Boolean]",S="[object Date]",L="[object Error]",$="[object Function]",z="[object GeneratorFunction]",C="[object Map]",w="[object Number]",Q="[object Null]",u="[object Object]",a="[object Proxy]",l="[object RegExp]",x="[object Set]",j="[object String]",A="[object Undefined]",P="[object WeakMap]",k="[object ArrayBuffer]",D="[object DataView]",M="[object Float32Array]",U="[object Float64Array]",G="[object Int8Array]",R="[object Int16Array]",at="[object Int32Array]",st="[object Uint8Array]",lt="[object Uint8ClampedArray]",Ce="[object Uint16Array]",Be="[object Uint32Array]",Ee=/[\\^$.*+?()[\]{}|]/g,$e=/^\[object .+?Constructor\]$/,je=/^(?:0|[1-9]\d*)$/,g={};g[M]=g[U]=g[G]=g[R]=g[at]=g[st]=g[lt]=g[Ce]=g[Be]=!0,g[N]=g[V]=g[k]=g[T]=g[D]=g[S]=g[L]=g[$]=g[C]=g[w]=g[u]=g[l]=g[x]=g[j]=g[P]=!1;var zt=typeof ot=="object"&&ot&&ot.Object===Object&&ot,Ae=typeof self=="object"&&self&&self.Object===Object&&self,X=zt||Ae||Function("return this")(),Ft=b&&!b.nodeType&&b,tt=Ft&&!0&&r&&!r.nodeType&&r,Ht=tt&&tt.exports===Ft,yt=Ht&&zt.process,Pt=function(){try{var t=tt&&tt.require&&tt.require("util").types;return t||yt&&yt.binding&&yt.binding("util")}catch{}}(),kt=Pt&&Pt.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,i=Array(t);++n<t;)i[n]=e(n);return i}function Ie(t){return function(e){return t(e)}}function Le(t,e){return t==null?void 0:t[e]}function ze(t,e){return function(n){return t(e(n))}}var Fe=Array.prototype,He=Function.prototype,ct=Object.prototype,Tt=X["__core-js_shared__"],dt=He.toString,F=ct.hasOwnProperty,Dt=function(){var t=/[^.]+$/.exec(Tt&&Tt.keys&&Tt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),Mt=ct.toString,Pe=dt.call(Object),ke=RegExp("^"+dt.call(F).replace(Ee,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ut=Ht?X.Buffer:void 0,Ut=X.Symbol,Gt=X.Uint8Array,Rt=ut?ut.allocUnsafe:void 0,qt=ze(Object.getPrototypeOf,Object),Kt=Object.create,De=ct.propertyIsEnumerable,Me=Fe.splice,q=Ut?Ut.toStringTag:void 0,ft=function(){try{var t=xt(Object,"defineProperty");return t({},"",{}),t}catch{}}(),Ue=ut?ut.isBuffer:void 0,Wt=Math.max,Ge=Date.now,Qt=xt(X,"Map"),et=xt(Object,"create"),Re=function(){function t(){}return function(e){if(!W(e))return{};if(Kt)return Kt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();function K(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 qe(){this.__data__=et?et(null):{},this.size=0}function Ke(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function We(t){var e=this.__data__;if(et){var n=e[t];return n===m?void 0:n}return F.call(e,t)?e[t]:void 0}function Qe(t){var e=this.__data__;return et?e[t]!==void 0:F.call(e,t)}function Ze(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=et&&e===void 0?m:e,this}K.prototype.clear=qe,K.prototype.delete=Ke,K.prototype.get=We,K.prototype.has=Qe,K.prototype.set=Ze;function H(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 Je(){this.__data__=[],this.size=0}function Ye(t){var e=this.__data__,n=pt(e,t);if(n<0)return!1;var i=e.length-1;return n==i?e.pop():Me.call(e,n,1),--this.size,!0}function Xe(t){var e=this.__data__,n=pt(e,t);return n<0?void 0:e[n][1]}function tn(t){return pt(this.__data__,t)>-1}function en(t,e){var n=this.__data__,i=pt(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}H.prototype.clear=Je,H.prototype.delete=Ye,H.prototype.get=Xe,H.prototype.has=tn,H.prototype.set=en;function Z(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 nn(){this.size=0,this.__data__={hash:new K,map:new(Qt||H),string:new K}}function rn(t){var e=gt(this,t).delete(t);return this.size-=e?1:0,e}function on(t){return gt(this,t).get(t)}function an(t){return gt(this,t).has(t)}function sn(t,e){var n=gt(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}Z.prototype.clear=nn,Z.prototype.delete=rn,Z.prototype.get=on,Z.prototype.has=an,Z.prototype.set=sn;function J(t){var e=this.__data__=new H(t);this.size=e.size}function ln(){this.__data__=new H,this.size=0}function cn(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function dn(t){return this.__data__.get(t)}function un(t){return this.__data__.has(t)}function fn(t,e){var n=this.__data__;if(n instanceof H){var i=n.__data__;if(!Qt||i.length<p-1)return i.push([t,e]),this.size=++n.size,this;n=this.__data__=new Z(i)}return n.set(t,e),this.size=n.size,this}J.prototype.clear=ln,J.prototype.delete=cn,J.prototype.get=dn,J.prototype.has=un,J.prototype.set=fn;function pn(t,e){var n=Bt(t),i=!n&&Ct(t),d=!n&&!i&&te(t),h=!n&&!i&&!d&&ne(t),_=n||i||d||h,c=_?Ve(t.length,String):[],y=c.length;for(var B in t)(e||F.call(t,B))&&!(_&&(B=="length"||d&&(B=="offset"||B=="parent")||h&&(B=="buffer"||B=="byteLength"||B=="byteOffset")||Yt(B,y)))&&c.push(B);return c}function St(t,e,n){(n!==void 0&&!bt(t[e],n)||n===void 0&&!(e in t))&&wt(t,e,n)}function hn(t,e,n){var i=t[e];(!(F.call(t,e)&&bt(i,n))||n===void 0&&!(e in t))&&wt(t,e,n)}function pt(t,e){for(var n=t.length;n--;)if(bt(t[n][0],e))return n;return-1}function wt(t,e,n){e=="__proto__"&&ft?ft(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var gn=En();function ht(t){return t==null?t===void 0?A:Q:q&&q in Object(t)?$n(t):Ln(t)}function Zt(t){return nt(t)&&ht(t)==N}function bn(t){if(!W(t)||Vn(t))return!1;var e=$t(t)?ke:$e;return e.test(Pn(t))}function mn(t){return nt(t)&&ee(t.length)&&!!g[ht(t)]}function vn(t){if(!W(t))return In(t);var e=Xt(t),n=[];for(var i in t)i=="constructor"&&(e||!F.call(t,i))||n.push(i);return n}function Jt(t,e,n,i,d){t!==e&&gn(e,function(h,_){if(d||(d=new J),W(h))_n(t,e,_,n,Jt,i,d);else{var c=i?i(Ot(t,_),h,_+"",t,e,d):void 0;c===void 0&&(c=h),St(t,_,c)}},re)}function _n(t,e,n,i,d,h,_){var c=Ot(t,n),y=Ot(e,n),B=_.get(y);if(B){St(t,n,B);return}var O=h?h(c,y,n+"",t,e,_):void 0,rt=O===void 0;if(rt){var jt=Bt(y),At=!jt&&te(y),ie=!jt&&!At&&ne(y);O=y,jt||At||ie?Bt(c)?O=c:kn(c)?O=On(c):At?(rt=!1,O=Sn(y,!0)):ie?(rt=!1,O=xn(y,!0)):O=[]:Dn(y)||Ct(y)?(O=c,Ct(c)?O=Mn(c):(!W(c)||$t(c))&&(O=jn(y))):rt=!1}rt&&(_.set(y,O),d(O,y,i,h,_),_.delete(y)),St(t,n,O)}function yn(t,e){return Fn(zn(t,e,oe),t+"")}var Tn=ft?function(t,e){return ft(t,"toString",{configurable:!0,enumerable:!1,value:Gn(e),writable:!0})}:oe;function Sn(t,e){if(e)return t.slice();var n=t.length,i=Rt?Rt(n):new t.constructor(n);return t.copy(i),i}function wn(t){var e=new t.constructor(t.byteLength);return new Gt(e).set(new Gt(t)),e}function xn(t,e){var n=e?wn(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function On(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function Cn(t,e,n,i){var d=!n;n||(n={});for(var h=-1,_=e.length;++h<_;){var c=e[h],y=i?i(n[c],t[c],c,n,t):void 0;y===void 0&&(y=t[c]),d?wt(n,c,y):hn(n,c,y)}return n}function Bn(t){return yn(function(e,n){var i=-1,d=n.length,h=d>1?n[d-1]:void 0,_=d>2?n[2]:void 0;for(h=t.length>3&&typeof h=="function"?(d--,h):void 0,_&&An(n[0],n[1],_)&&(h=d<3?void 0:h,d=1),e=Object(e);++i<d;){var c=n[i];c&&t(e,c,i,h)}return e})}function En(t){return function(e,n,i){for(var d=-1,h=Object(e),_=i(e),c=_.length;c--;){var y=_[t?c:++d];if(n(h[y],y,h)===!1)break}return e}}function gt(t,e){var n=t.__data__;return Nn(e)?n[typeof e=="string"?"string":"hash"]:n.map}function xt(t,e){var n=Le(t,e);return bn(n)?n:void 0}function $n(t){var e=F.call(t,q),n=t[q];try{t[q]=void 0;var i=!0}catch{}var d=Mt.call(t);return i&&(e?t[q]=n:delete t[q]),d}function jn(t){return typeof t.constructor=="function"&&!Xt(t)?Re(qt(t)):{}}function Yt(t,e){var n=typeof t;return e=e==null?v:e,!!e&&(n=="number"||n!="symbol"&&je.test(t))&&t>-1&&t%1==0&&t<e}function An(t,e,n){if(!W(n))return!1;var i=typeof e;return(i=="number"?Et(n)&&Yt(e,n.length):i=="string"&&e in n)?bt(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!!Dt&&Dt in t}function Xt(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||ct;return t===n}function In(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Ln(t){return Mt.call(t)}function zn(t,e,n){return e=Wt(e===void 0?t.length-1:e,0),function(){for(var i=arguments,d=-1,h=Wt(i.length-e,0),_=Array(h);++d<h;)_[d]=i[e+d];d=-1;for(var c=Array(e+1);++d<e;)c[d]=i[d];return c[e]=n(_),Ne(t,this,c)}}function Ot(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var Fn=Hn(Tn);function Hn(t){var e=0,n=0;return function(){var i=Ge(),d=s-(i-n);if(n=i,d>0){if(++e>=f)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function Pn(t){if(t!=null){try{return dt.call(t)}catch{}try{return t+""}catch{}}return""}function bt(t,e){return t===e||t!==t&&e!==e}var Ct=Zt(function(){return arguments}())?Zt:function(t){return nt(t)&&F.call(t,"callee")&&!De.call(t,"callee")},Bt=Array.isArray;function Et(t){return t!=null&&ee(t.length)&&!$t(t)}function kn(t){return nt(t)&&Et(t)}var te=Ue||Rn;function $t(t){if(!W(t))return!1;var e=ht(t);return e==$||e==z||e==I||e==a}function ee(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=v}function W(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function nt(t){return t!=null&&typeof t=="object"}function Dn(t){if(!nt(t)||ht(t)!=u)return!1;var e=qt(t);if(e===null)return!0;var n=F.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&dt.call(n)==Pe}var ne=kt?Ie(kt):mn;function Mn(t){return Cn(t,re(t))}function re(t){return Et(t)?pn(t,!0):vn(t)}var Un=Bn(function(t,e,n){Jt(t,e,n)});function Gn(t){return function(){return t}}function oe(t){return t}function Rn(){return!1}r.exports=Un})(vt,vt.exports);var Vt=vt.exports;function _t(r){return typeof r=="string"?document.querySelector(r):typeof r=="function"?r():null}const it={popper:{},overlay:{enabled:!0,padding:0,borderRadius: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}};function ae(){var v,N,V,I;const r=o.ref(""),b=o.ref(null),p=o.ref((N=(v=it.overlay)==null?void 0:v.padding)!=null?N:0),m=o.ref((I=(V=it.overlay)==null?void 0:V.borderRadius)!=null?I:0),f=()=>{s(b.value,{padding:p.value,borderRadius:m.value})},s=async(T,S=it.overlay)=>{var j,A,P,k,D,M,U,G,R,at,st,lt;if(!T)return;const{innerWidth:L,innerHeight:$}=window,{left:z,top:C,width:w,height:Q}=T.getBoundingClientRect(),u=typeof S.padding=="number"?{top:S.padding,right:S.padding,bottom:S.padding,left:S.padding}:S.padding,a=typeof S.borderRadius=="number"?{leftTop:S.borderRadius,rightTop:S.borderRadius,rightBottom:S.borderRadius,leftBottom:S.borderRadius}:S.borderRadius,l={top:C-((j=u==null?void 0:u.top)!=null?j:0),right:z+w+((A=u==null?void 0:u.right)!=null?A:0),bottom:C+Q+((P=u==null?void 0:u.bottom)!=null?P:0),left:z-((k=u==null?void 0:u.left)!=null?k:0)},x={leftTop:`M${l.left+((D=a==null?void 0:a.leftTop)!=null?D:0)},${l.top} Q${l.left},${l.top} ${l.left},${l.top+((M=a==null?void 0:a.leftTop)!=null?M:0)}`,rightTop:`V${l.top+((U=a==null?void 0:a.rightTop)!=null?U:0)} Q${l.right},${l.top} ${l.right-((G=a==null?void 0:a.rightTop)!=null?G:0)},${l.top}`,rightBottom:`H${l.right-((R=a==null?void 0:a.rightBottom)!=null?R:0)} Q${l.right},${l.bottom} ${l.right},${l.bottom-((at=a==null?void 0:a.rightBottom)!=null?at:0)}`,leftBottom:`V${l.bottom-((st=a==null?void 0:a.leftBottom)!=null?st:0)} Q${l.left},${l.bottom} ${l.left+((lt=a==null?void 0:a.leftBottom)!=null?lt:0)},${l.bottom}`};r.value=`

Z
`,b.value=T,p.value=u,m.value=a};return o.onMounted(()=>{window.addEventListener("scroll",f),window.addEventListener("resize",f)}),o.onUnmounted(()=>{window.removeEventListener("scroll",f),window.removeEventListener("resize",f)}),{path:r,updatePath:s}}var It=(r,b)=>{const p=r.__vccOpts||r;for(const[m,f]of b)p[m]=f;return p};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:p,isFirstStep:m,isLastStep:f,options:s,next:v,previous:N,exit:V,finish:I}=o.toRefs(b.value),T=o.computed(()=>Vt({},s==null?void 0:s.value,p.value.options)),S=o.computed(()=>{var u,a,l;return{previous:!((u=T.value.hideButtons)!=null&&u.previous),next:!((a=T.value.hideButtons)!=null&&a.next),exit:!((l=T.value.hideButtons)!=null&&l.exit)}}),L=o.computed(()=>{var u,a,l,x,j,A;return{previous:(a=(u=T.value)==null?void 0:u.labels)==null?void 0:a.previousButton,next:(x=(l=T.value)==null?void 0:l.labels)==null?void 0:x.nextButton,finish:(A=(j=T.value)==null?void 0:j.labels)==null?void 0:A.finishButton}}),{updatePath:$,path:z}=ae(),C=o.ref(),w=async()=>{var a,l,x,j,A,P,k,D,M,U,G,R;await o.nextTick();const u=_t((l=(a=p==null?void 0:p.value)==null?void 0:a.attachTo)==null?void 0:l.element);u&&C.value&&(r.value=!0,(j=(x=T.value)==null?void 0:x.scrollToStep)!=null&&j.enabled&&u.scrollIntoView((P=(A=T.value)==null?void 0:A.scrollToStep)==null?void 0:P.options),Y.createPopper(u,C.value,T.value.popper),(D=(k=T.value)==null?void 0:k.overlay)!=null&&D.enabled&&$(u,{padding:(U=(M=T.value)==null?void 0:M.overlay)==null?void 0:U.padding,borderRadius:(R=(G=T.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.watch(p,w,{immediate:!0}),{stepElement:C,next:v,previous:N,path:z,show:r,step:p,isFirstStep:m,isLastStep:f,exit:()=>{var u;V.value(),(u=T.value)!=null&&u.autoFinishByExit&&I.value()},finish:I,isButtonVisible:S,buttonLabels:L}}}),le={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"}},ce=["d"],de={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},ue={class:"v-onboarding-item"},fe={class:"v-onboarding-item__header"},pe={key:0,class:"v-onboarding-item__header-title"},he=[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)],ge={key:0,class:"v-onboarding-item__description"},be={class:"v-onboarding-item__actions"},me=o.createElementVNode("div",{"data-popper-arrow":""},null,-1);function ve(r,b,p,m,f,s){return o.withDirectives((o.openBlock(),o.createElementBlock("div",null,[(o.openBlock(),o.createElementBlock("svg",le,[o.createElementVNode("path",{d:r.path},null,8,ce)])),o.createElementVNode("div",de,[r.step?o.renderSlot(r.$slots,"default",{key:0},()=>[o.createElementVNode("div",ue,[o.createElementVNode("div",fe,[r.step.content.title?(o.openBlock(),o.createElementBlock("span",pe,o.toDisplayString(r.step.content.title),1)):o.createCommentVNode("",!0),r.isButtonVisible.exit?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),class:"v-onboarding-item__header-close"},he)):o.createCommentVNode("",!0)]),r.step.content.description?(o.openBlock(),o.createElementBlock("p",ge,o.toDisplayString(r.step.content.description),1)):o.createCommentVNode("",!0),o.createElementVNode("div",be,[!r.isFirstStep&&r.isButtonVisible.previous?(o.openBlock(),o.createElementBlock("button",{key:0,type:"button",onClick:b[1]||(b[1]=(...v)=>r.previous&&r.previous(...v)),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:b[2]||(b[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),me],512)],512)),[[o.vShow,r.show]])}var Lt=It(se,[["render",ve]]);const _e=o.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:Lt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(r,{expose:b,emit:p}){const m=o.ref(mt.IDLE),f=o.ref(m.value),s=w=>{typeof w=="function"?m.value=w(m.value):m.value=w},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var w;return(w=r.steps)==null?void 0:w[f.value]});o.watch(m,async(w,Q)=>{var l,x;const u=(l=r.steps)==null?void 0:l[Q];u&&await N(u);const a=(x=r.steps)==null?void 0:x[w];a&&await v(a),f.value=w});const I=o.computed(()=>f.value===mt.FINISHED),T=()=>s(0),S=()=>{s(mt.FINISHED),p("finish")},L=()=>p("exit");b({start:T,finish:S,goToStep:s});const $=()=>{s(w=>w-1)},z=()=>{const w=f.value+1;if(w===r.steps.length){S();return}s(w)},C=o.computed(()=>({step:V,options:o.computed(()=>Vt({},it,r.options)),next:z,previous:$,finish:S,exit:L,isFirstStep:o.computed(()=>f.value===0),isLastStep:o.computed(()=>f.value===r.steps.length-1)}));return o.provide(Nt,C),{index:m,activeStep:V,next:z,previous:$,isFinished:I,setIndex:s,isFirstStep:C.value.isFirstStep,isLastStep:C.value.isLastStep,finish:S,exit:L}}});function ye(){return{setClassName:({element:p,classList:m=[]})=>{!p||p.classList.add(...m)},unsetClassName:({element:p,classList:m=[]})=>{!p||p.classList.remove(...m)}}}function Te(){const{setClassName:r,unsetClassName:b}=ye();return{beforeHook:f=>{var s,v;return r({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.beforeStep)==null?void 0:v.call(s)},afterHook:f=>{var s,v;return b({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.afterStep)==null?void 0:v.call(s)}}}const Se={key:0,"data-v-onboarding-wrapper":""};function we(r,b,p,m,f,s){const v=o.resolveComponent("VOnboardingStep");return r.isFinished?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",Se,[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(v,{key:r.index}))])]))}var xe=It(_e,[["render",we]]);function Oe(r){return{start:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.start()},finish:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.finish()},exit:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.exit()},goToStep:s=>{var v;return(v=r==null?void 0:r.value)==null?void 0:v.goToStep(s)}}}var Kn=(()=>`.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-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}
`,b.value=T,p.value=u,m.value=a};return o.onMounted(()=>{window.addEventListener("scroll",f),window.addEventListener("resize",f)}),o.onUnmounted(()=>{window.removeEventListener("scroll",f),window.removeEventListener("resize",f)}),{path:r,updatePath:s}}var It=(r,b)=>{const p=r.__vccOpts||r;for(const[m,f]of b)p[m]=f;return p};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:p,isFirstStep:m,isLastStep:f,options:s,next:v,previous:N,exit:V,finish:I}=b.value,T=o.computed(()=>Vt({},s==null?void 0:s.value,p.value.options)),S=o.computed(()=>{var u,a,l;return{previous:!((u=T.value.hideButtons)!=null&&u.previous),next:!((a=T.value.hideButtons)!=null&&a.next),exit:!((l=T.value.hideButtons)!=null&&l.exit)}}),L=o.computed(()=>{var u,a,l,x,j,A;return{previous:(a=(u=T.value)==null?void 0:u.labels)==null?void 0:a.previousButton,next:(x=(l=T.value)==null?void 0:l.labels)==null?void 0:x.nextButton,finish:(A=(j=T.value)==null?void 0:j.labels)==null?void 0:A.finishButton}}),{updatePath:$,path:z}=ae(),C=o.ref(),w=async()=>{var a,l,x,j,A,P,k,D,M,U,G,R;await o.nextTick();const u=_t((l=(a=p==null?void 0:p.value)==null?void 0:a.attachTo)==null?void 0:l.element);u&&C.value&&(r.value=!0,(j=(x=T.value)==null?void 0:x.scrollToStep)!=null&&j.enabled&&u.scrollIntoView((P=(A=T.value)==null?void 0:A.scrollToStep)==null?void 0:P.options),Y.createPopper(u,C.value,T.value.popper),(D=(k=T.value)==null?void 0:k.overlay)!=null&&D.enabled&&$(u,{padding:(U=(M=T.value)==null?void 0:M.overlay)==null?void 0:U.padding,borderRadius:(R=(G=T.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.watch(p,w,{immediate:!0}),{stepElement:C,next:v,previous:N,path:z,show:r,step:p,isFirstStep:m,isLastStep:f,exit:()=>{var u;V(),(u=T.value)!=null&&u.autoFinishByExit&&I()},finish:I,isButtonVisible:S,buttonLabels:L}}}),le={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"}},ce=["d"],de={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},ue={class:"v-onboarding-item"},fe={class:"v-onboarding-item__header"},pe={key:0,class:"v-onboarding-item__header-title"},he=[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)],ge={key:0,class:"v-onboarding-item__description"},be={class:"v-onboarding-item__actions"},me=o.createElementVNode("div",{"data-popper-arrow":""},null,-1);function ve(r,b,p,m,f,s){return o.withDirectives((o.openBlock(),o.createElementBlock("div",null,[(o.openBlock(),o.createElementBlock("svg",le,[o.createElementVNode("path",{d:r.path},null,8,ce)])),o.createElementVNode("div",de,[r.step?o.renderSlot(r.$slots,"default",{key:0},()=>[o.createElementVNode("div",ue,[o.createElementVNode("div",fe,[r.step.content.title?(o.openBlock(),o.createElementBlock("span",pe,o.toDisplayString(r.step.content.title),1)):o.createCommentVNode("",!0),r.isButtonVisible.exit?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),class:"v-onboarding-item__header-close"},he)):o.createCommentVNode("",!0)]),r.step.content.description?(o.openBlock(),o.createElementBlock("p",ge,o.toDisplayString(r.step.content.description),1)):o.createCommentVNode("",!0),o.createElementVNode("div",be,[!r.isFirstStep&&r.isButtonVisible.previous?(o.openBlock(),o.createElementBlock("button",{key:0,type:"button",onClick:b[1]||(b[1]=(...v)=>r.previous&&r.previous(...v)),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:b[2]||(b[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),me],512)],512)),[[o.vShow,r.show]])}var Lt=It(se,[["render",ve]]);const _e=o.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:Lt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(r,{expose:b,emit:p}){const m=o.ref(mt.IDLE),f=o.ref(m.value),s=w=>{typeof w=="function"?m.value=w(m.value):m.value=w},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var w;return(w=r.steps)==null?void 0:w[f.value]});o.watch(m,async(w,Q)=>{var l,x;const u=(l=r.steps)==null?void 0:l[Q];u&&await N(u);const a=(x=r.steps)==null?void 0:x[w];a&&await v(a),f.value=w});const I=o.computed(()=>f.value===mt.FINISHED),T=()=>s(0),S=()=>{s(mt.FINISHED),p("finish")},L=()=>p("exit");b({start:T,finish:S,goToStep:s});const $=()=>{s(w=>w-1)},z=()=>{const w=f.value+1;if(w===r.steps.length){S();return}s(w)},C=o.computed(()=>({step:V,options:o.computed(()=>Vt({},it,r.options)),next:z,previous:$,finish:S,exit:L,isFirstStep:o.computed(()=>f.value===0),isLastStep:o.computed(()=>f.value===r.steps.length-1)}));return o.provide(Nt,C),{index:m,activeStep:V,next:z,previous:$,isFinished:I,setIndex:s,isFirstStep:C.value.isFirstStep,isLastStep:C.value.isLastStep,finish:S,exit:L}}});function ye(){return{setClassName:({element:p,classList:m=[]})=>{!p||p.classList.add(...m)},unsetClassName:({element:p,classList:m=[]})=>{!p||p.classList.remove(...m)}}}function Te(){const{setClassName:r,unsetClassName:b}=ye();return{beforeHook:f=>{var s,v;return r({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.beforeStep)==null?void 0:v.call(s)},afterHook:f=>{var s,v;return b({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.afterStep)==null?void 0:v.call(s)}}}const Se={key:0,"data-v-onboarding-wrapper":""};function we(r,b,p,m,f,s){const v=o.resolveComponent("VOnboardingStep");return r.isFinished?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",Se,[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(v,{key:r.index}))])]))}var xe=It(_e,[["render",we]]);function Oe(r){return{start:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.start()},finish:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.finish()},exit:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.exit()},goToStep:s=>{var v;return(v=r==null?void 0:r.value)==null?void 0:v.goToStep(s)}}}var Kn=(()=>`.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-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}
`)();E.VOnboardingStep=Lt,E.VOnboardingWrapper=xe,E.useVOnboarding=Oe,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
{
"name": "v-onboarding",
"version": "2.5.1",
"version": "2.5.2",
"description": "v-onboarding is a super-slim, fully-typed onboarding component for Vue 3",

@@ -5,0 +5,0 @@ "repository": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc