v-onboarding 2.3.2 → 2.4.0

package/dist/v-onboarding.es.js

@@ -847,7 +847,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { style: { "width": "100%", "height": "100%", "position": "fixed", "top": "0", "left": "0", "opacity": "0.5", "z-index": "var(--v-onboarding-overlay-z, 10)", "pointer-events": "none" } };
+const _hoisted_1$1 = { 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" } };
 const _hoisted_2 = ["d"];
 const _hoisted_3 = {
   ref: "stepElement",

package/dist/v-onboarding.umd.js

@@ -8,5 +8,5 @@
       ${O.rightBottom}
       ${O.rightTop}
       Z
-    `,b.value=w,p.value=f,m.value=s};return o.onMounted(()=>{window.addEventListener("scroll",u),window.addEventListener("resize",u)}),o.onUnmounted(()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",u)}),{path:r,updatePath:a}}var It=(r,b)=>{const p=r.__vccOpts||r;for(const[m,u]of b)p[m]=u;return p};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:p,isFirstStep:m,isLastStep:u,options:a,next:v,previous:N,exit:V,finish:H}=o.toRefs(b.value),w=o.computed(()=>Vt({},a==null?void 0:a.value,p.value.options)),T=o.computed(()=>{var x,f;return{previous:!((x=w.value.hideButtons)!=null&&x.previous),next:!((f=w.value.hideButtons)!=null&&f.next)}}),I=o.computed(()=>{var x,f,s,d,O,A;return{previous:(f=(x=w.value)==null?void 0:x.labels)==null?void 0:f.previousButton,next:(d=(s=w.value)==null?void 0:s.labels)==null?void 0:d.nextButton,finish:(A=(O=w.value)==null?void 0:O.labels)==null?void 0:A.finishButton}}),{updatePath:j,path:L}=ae(),E=o.ref(),S=()=>{var f,s,d,O,A,P,D,M,k,U,G,R;const x=_t((s=(f=p==null?void 0:p.value)==null?void 0:f.attachTo)==null?void 0:s.element);x&&E.value&&(r.value=!0,(O=(d=w.value)==null?void 0:d.scrollToStep)!=null&&O.enabled&&x.scrollIntoView((P=(A=w.value)==null?void 0:A.scrollToStep)==null?void 0:P.options),J.createPopper(x,E.value,w.value.popper),(M=(D=w.value)==null?void 0:D.overlay)!=null&&M.enabled&&j(x,{padding:(U=(k=w.value)==null?void 0:k.overlay)==null?void 0:U.padding,borderRadius:(R=(G=w.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.watch(p,S,{immediate:!0}),{stepElement:E,next:v,previous:N,path:L,show:r,step:p,isFirstStep:m,isLastStep:u,exit:V,finish:H,isButtonVisible:T,buttonLabels:I}}}),le={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",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,u,a){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),o.createElementVNode("button",{onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),class:"v-onboarding-item__header-close"},he)]),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),u=o.ref(m.value),a=S=>{typeof S=="function"?m.value=S(m.value):m.value=S},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var S;return(S=r.steps)==null?void 0:S[u.value]});o.watch(m,async(S,x)=>{var d,O;const f=(d=r.steps)==null?void 0:d[x];f&&await N(f);const s=(O=r.steps)==null?void 0:O[S];s&&await v(s),u.value=S});const H=o.computed(()=>u.value===mt.FINISHED),w=()=>a(0),T=()=>{a(mt.FINISHED),p("finish")},I=()=>p("exit");b({start:w,finish:T,goToStep:a});const j=()=>{a(S=>S-1)},L=()=>{const S=u.value+1;if(S===r.steps.length){T();return}a(S)},E=o.computed(()=>({step:V,options:o.computed(()=>Vt({},ot,r.options)),next:L,previous:j,finish:T,exit:I,isFirstStep:o.computed(()=>u.value===0),isLastStep:o.computed(()=>u.value===r.steps.length-1)}));return o.provide(Nt,E),{index:m,activeStep:V,next:L,previous:j,isFinished:H,setIndex:a,isFirstStep:E.value.isFirstStep,isLastStep:E.value.isLastStep,finish:T,exit:I}}});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:u=>{var a,v;return r({element:_t(u.attachTo.element),classList:u.attachTo.classList}),(v=(a=u.on)==null?void 0:a.beforeStep)==null?void 0:v.call(a)},afterHook:u=>{var a,v;return b({element:_t(u.attachTo.element),classList:u.attachTo.classList}),(v=(a=u.on)==null?void 0:a.afterStep)==null?void 0:v.call(a)}}}const Se={key:0,"data-v-onboarding-wrapper":""};function we(r,b,p,m,u,a){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 a;return(a=r==null?void 0:r.value)==null?void 0:a.start()},finish:()=>{var a;return(a=r==null?void 0:r.value)==null?void 0:a.finish()},exit:()=>{var a;return(a=r==null?void 0:r.value)==null?void 0:a.exit()},goToStep:a=>{var v;return(v=r==null?void 0:r.value)==null?void 0:v.goToStep(a)}}}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=w,p.value=f,m.value=s};return o.onMounted(()=>{window.addEventListener("scroll",u),window.addEventListener("resize",u)}),o.onUnmounted(()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",u)}),{path:r,updatePath:a}}var It=(r,b)=>{const p=r.__vccOpts||r;for(const[m,u]of b)p[m]=u;return p};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:p,isFirstStep:m,isLastStep:u,options:a,next:v,previous:N,exit:V,finish:H}=o.toRefs(b.value),w=o.computed(()=>Vt({},a==null?void 0:a.value,p.value.options)),T=o.computed(()=>{var x,f;return{previous:!((x=w.value.hideButtons)!=null&&x.previous),next:!((f=w.value.hideButtons)!=null&&f.next)}}),I=o.computed(()=>{var x,f,s,d,O,A;return{previous:(f=(x=w.value)==null?void 0:x.labels)==null?void 0:f.previousButton,next:(d=(s=w.value)==null?void 0:s.labels)==null?void 0:d.nextButton,finish:(A=(O=w.value)==null?void 0:O.labels)==null?void 0:A.finishButton}}),{updatePath:j,path:L}=ae(),E=o.ref(),S=()=>{var f,s,d,O,A,P,D,M,k,U,G,R;const x=_t((s=(f=p==null?void 0:p.value)==null?void 0:f.attachTo)==null?void 0:s.element);x&&E.value&&(r.value=!0,(O=(d=w.value)==null?void 0:d.scrollToStep)!=null&&O.enabled&&x.scrollIntoView((P=(A=w.value)==null?void 0:A.scrollToStep)==null?void 0:P.options),J.createPopper(x,E.value,w.value.popper),(M=(D=w.value)==null?void 0:D.overlay)!=null&&M.enabled&&j(x,{padding:(U=(k=w.value)==null?void 0:k.overlay)==null?void 0:U.padding,borderRadius:(R=(G=w.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.watch(p,S,{immediate:!0}),{stepElement:E,next:v,previous:N,path:L,show:r,step:p,isFirstStep:m,isLastStep:u,exit:V,finish:H,isButtonVisible:T,buttonLabels:I}}}),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,u,a){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),o.createElementVNode("button",{onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),class:"v-onboarding-item__header-close"},he)]),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),u=o.ref(m.value),a=S=>{typeof S=="function"?m.value=S(m.value):m.value=S},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var S;return(S=r.steps)==null?void 0:S[u.value]});o.watch(m,async(S,x)=>{var d,O;const f=(d=r.steps)==null?void 0:d[x];f&&await N(f);const s=(O=r.steps)==null?void 0:O[S];s&&await v(s),u.value=S});const H=o.computed(()=>u.value===mt.FINISHED),w=()=>a(0),T=()=>{a(mt.FINISHED),p("finish")},I=()=>p("exit");b({start:w,finish:T,goToStep:a});const j=()=>{a(S=>S-1)},L=()=>{const S=u.value+1;if(S===r.steps.length){T();return}a(S)},E=o.computed(()=>({step:V,options:o.computed(()=>Vt({},ot,r.options)),next:L,previous:j,finish:T,exit:I,isFirstStep:o.computed(()=>u.value===0),isLastStep:o.computed(()=>u.value===r.steps.length-1)}));return o.provide(Nt,E),{index:m,activeStep:V,next:L,previous:j,isFinished:H,setIndex:a,isFirstStep:E.value.isFirstStep,isLastStep:E.value.isLastStep,finish:T,exit:I}}});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:u=>{var a,v;return r({element:_t(u.attachTo.element),classList:u.attachTo.classList}),(v=(a=u.on)==null?void 0:a.beforeStep)==null?void 0:v.call(a)},afterHook:u=>{var a,v;return b({element:_t(u.attachTo.element),classList:u.attachTo.classList}),(v=(a=u.on)==null?void 0:a.afterStep)==null?void 0:v.call(a)}}}const Se={key:0,"data-v-onboarding-wrapper":""};function we(r,b,p,m,u,a){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 a;return(a=r==null?void 0:r.value)==null?void 0:a.start()},finish:()=>{var a;return(a=r==null?void 0:r.value)==null?void 0:a.finish()},exit:()=>{var a;return(a=r==null?void 0:r.value)==null?void 0:a.exit()},goToStep:a=>{var v;return(v=r==null?void 0:r.value)==null?void 0:v.goToStep(a)}}}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.VOnboardingStep=Lt,B.VOnboardingWrapper=xe,B.useVOnboarding=Oe,Object.defineProperties(B,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-onboarding",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "v-onboarding is a super-slim, fully-typed onboarding component for Vue 3",
   "repository": {
     "type": "git",