v-onboarding 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/v-onboarding.es.js
CHANGED
|
@@ -894,7 +894,6 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
894
894
|
_ctx.step.content.title ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.step.content.title), 1)) : createCommentVNode("", true),
|
|
895
895
|
createElementVNode("button", {
|
|
896
896
|
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.exit && _ctx.exit(...args)),
|
|
897
|
-
"finish,": "",
|
|
898
897
|
class: "v-onboarding-item__header-close"
|
|
899
898
|
}, _hoisted_8)
|
|
900
899
|
]),
|
package/dist/v-onboarding.umd.js
CHANGED
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
${x.rightBottom}
|
|
9
9
|
${x.rightTop}
|
|
10
10
|
Z
|
|
11
|
-
`,b.value=S,h.value=a,m.value=l};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 h=r.__vccOpts||r;for(const[m,f]of b)h[m]=f;return h};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:h,isFirstStep:m,isLastStep:f,options:s,next:v,previous:N,exit:V,finish:H}=o.toRefs(b.value),S=o.computed(()=>Vt({},s==null?void 0:s.value,h.value.options)),T=o.computed(()=>{var w,a;return{previous:!((w=S.value.hideButtons)!=null&&w.previous),next:!((a=S.value.hideButtons)!=null&&a.next)}}),I=o.computed(()=>{var w,a,l,u,x,O;return{previous:(a=(w=S.value)==null?void 0:w.labels)==null?void 0:a.previousButton,next:(u=(l=S.value)==null?void 0:l.labels)==null?void 0:u.nextButton,finish:(O=(x=S.value)==null?void 0:x.labels)==null?void 0:O.finishButton}}),{updatePath:B,path:L}=ae(),j=o.ref(),P=()=>{var a,l,u,x,O,A,M,D,k,U,G,R;const w=_t((l=(a=h==null?void 0:h.value)==null?void 0:a.attachTo)==null?void 0:l.element);w&&j.value&&(r.value=!0,(x=(u=S.value)==null?void 0:u.scrollToStep)!=null&&x.enabled&&w.scrollIntoView((A=(O=S.value)==null?void 0:O.scrollToStep)==null?void 0:A.options),J.createPopper(w,j.value,S.value.popper),(D=(M=S.value)==null?void 0:M.overlay)!=null&&D.enabled&&B(w,{padding:(U=(k=S.value)==null?void 0:k.overlay)==null?void 0:U.padding,borderRadius:(R=(G=S.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.onMounted(P),{stepElement:j,next:v,previous:N,path:L,show:r,step:h,isFirstStep:m,isLastStep:f,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,h,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),o.createElementVNode("button",{onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),
|
|
11
|
+
`,b.value=S,h.value=a,m.value=l};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 h=r.__vccOpts||r;for(const[m,f]of b)h[m]=f;return h};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:h,isFirstStep:m,isLastStep:f,options:s,next:v,previous:N,exit:V,finish:H}=o.toRefs(b.value),S=o.computed(()=>Vt({},s==null?void 0:s.value,h.value.options)),T=o.computed(()=>{var w,a;return{previous:!((w=S.value.hideButtons)!=null&&w.previous),next:!((a=S.value.hideButtons)!=null&&a.next)}}),I=o.computed(()=>{var w,a,l,u,x,O;return{previous:(a=(w=S.value)==null?void 0:w.labels)==null?void 0:a.previousButton,next:(u=(l=S.value)==null?void 0:l.labels)==null?void 0:u.nextButton,finish:(O=(x=S.value)==null?void 0:x.labels)==null?void 0:O.finishButton}}),{updatePath:B,path:L}=ae(),j=o.ref(),P=()=>{var a,l,u,x,O,A,M,D,k,U,G,R;const w=_t((l=(a=h==null?void 0:h.value)==null?void 0:a.attachTo)==null?void 0:l.element);w&&j.value&&(r.value=!0,(x=(u=S.value)==null?void 0:u.scrollToStep)!=null&&x.enabled&&w.scrollIntoView((A=(O=S.value)==null?void 0:O.scrollToStep)==null?void 0:A.options),J.createPopper(w,j.value,S.value.popper),(D=(M=S.value)==null?void 0:M.overlay)!=null&&D.enabled&&B(w,{padding:(U=(k=S.value)==null?void 0:k.overlay)==null?void 0:U.padding,borderRadius:(R=(G=S.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.onMounted(P),{stepElement:j,next:v,previous:N,path:L,show:r,step:h,isFirstStep:m,isLastStep:f,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,h,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),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:h}){const m=o.ref(mt.IDLE),f=o.ref(m.value),s=a=>{typeof a=="function"?m.value=a(m.value):m.value=a},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var a;return(a=r.steps)==null?void 0:a[f.value]});o.watch(m,async(a,l)=>{var O,A;const u=(O=r.steps)==null?void 0:O[l];u&&await N(u);const x=(A=r.steps)==null?void 0:A[a];x&&await v(x),f.value=a});const H=o.computed(()=>f.value===mt.FINISHED),S=()=>s(0),T=()=>{s(mt.FINISHED),h("finish")},I=()=>h("exit");b({start:S,finish:T,goToStep:s});const B=()=>{s(a=>a-1)},L=()=>{const a=f.value+1;if(a===r.steps.length){T();return}s(a)},j=o.ref({step:V,options:o.computed(()=>Vt({},ot,r.options)),next:L,previous:B,finish:T,exit:I,isFirstStep:o.computed(()=>f.value===0),isLastStep:o.computed(()=>f.value===r.steps.length-1)});o.provide(Nt,j);const P=o.computed(()=>f.value===0),w=o.computed(()=>f.value===r.steps.length-1);return{index:m,activeStep:V,next:L,previous:B,isFinished:H,setIndex:s,isFirstStep:P,isLastStep:w,finish:T,exit:I}}});function ye(){return{setClassName:({element:h,classList:m=[]})=>{!h||h.classList.add(...m)},unsetClassName:({element:h,classList:m=[]})=>{!h||h.classList.remove(...m)}}}function Te(){const{setClassName:r,unsetClassName:b}=ye();return{beforeHook:f=>{var s,v;return b({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 r({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,h,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}
|
|
12
12
|
`)();$.VOnboardingStep=Lt,$.VOnboardingWrapper=xe,$.useVOnboarding=Oe,Object.defineProperties($,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|