v-tutorial 0.0.0-stage → 1.0.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.
@@ -0,0 +1 @@
1
+ (function(g,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(g=typeof globalThis<"u"?globalThis:g||self,e(g.VTutorial={},g.Vue))})(this,function(g,e){"use strict";const ge=["xs","sm","md","lg","xl","xxl"],ve={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400};function Me(o,a){return o>=a.xxl?"xxl":o>=a.xl?"xl":o>=a.lg?"lg":o>=a.md?"md":o>=a.sm?"sm":"xs"}function Re(o,a){var c;const t={...o},s=ge.indexOf(a),i={sm:o.targetSm,md:o.targetMd,lg:o.targetLg,xl:o.targetXl,xxl:o.targetXxl},r={sm:o.placementSm,md:o.placementMd,lg:o.placementLg,xl:o.placementXl,xxl:o.placementXxl};for(let l=0;l<=s;l++){const m=ge[l],n=(c=o.breakpoints)==null?void 0:c[m];n&&(n.disabled!==void 0&&(t.disabled=n.disabled),n.target!==void 0&&(t.target=n.target),n.title!==void 0&&(t.title=n.title),n.content!==void 0&&(t.content=n.content),n.mode!==void 0&&(t.mode=n.mode),n.placement!==void 0&&(t.placement=n.placement),n.hintText!==void 0&&(t.hintText=n.hintText),n.spotlightPadding!==void 0&&(t.spotlightPadding=n.spotlightPadding),n.cardWidth!==void 0&&(t.cardWidth=n.cardWidth),n.autoScroll!==void 0&&(t.autoScroll=n.autoScroll),n.route!==void 0&&(t.route=n.route),n.rollbackRoute!==void 0&&(t.rollbackRoute=n.rollbackRoute),n.enterActions!==void 0&&(t.enterActions=n.enterActions),n.rollbackActions!==void 0&&(t.rollbackActions=n.rollbackActions),n.leaveActions!==void 0&&(t.leaveActions=n.leaveActions)),i[m]!==void 0&&(t.target=i[m]),r[m]!==void 0&&(t.placement=r[m])}return t}const N=new Map;function j(o){if(!o||typeof document>"u"||!document.body.contains(o))return!1;const a=o.getBoundingClientRect();return a.width>0&&a.height>0}function Ne(o){if(!o||typeof document>"u")return null;const a=N.get(o);if(a&&j(a.el))return a.el;const s=Array.from(document.querySelectorAll(`[data-tutorial-id="${o}"]`)).find(c=>j(c));if(s)return s;const i=o.replace(/^#/,""),r=document.getElementById(i);if(j(r))return r;try{const c=Array.from(document.querySelectorAll(o)),l=c.find(m=>j(m));return l||c[0]||null}catch{return null}}function Q(o){if(!o||!o.target||o.placement==="center")return[];const a=Array.isArray(o.target)?o.target:[o.target],t=[];for(const s of a){const i=Ne(s);i&&t.push(i)}return t}function ne(o){const a=Q(o);return a.find(s=>j(s))||a[0]||null}function Ve(o){const a=Q(o);if(!a.length)return null;const t=a.map(l=>l.getBoundingClientRect()).filter(l=>l.width>0&&l.height>0);if(!t.length)return null;if(t.length===1)return t[0];const s=Math.min(...t.map(l=>l.left)),i=Math.min(...t.map(l=>l.top)),r=Math.max(...t.map(l=>l.right)),c=Math.max(...t.map(l=>l.bottom));return new DOMRect(s,i,r-s,c-i)}async function $e(o,a,t="smooth"){if(!a)return;const s=o.getBoundingClientRect(),i=70;if(!(s.top>=i&&s.left>=0&&s.bottom<=window.innerHeight-i&&s.right<=window.innerWidth))try{o.scrollIntoView({behavior:t,block:"center",inline:"nearest"}),await new Promise(c=>setTimeout(c,220))}catch{o.scrollIntoView()}}async function Le(o,a,t="smooth",s=1200){if(!o||!o.target||o.placement==="center")return null;const i=Date.now();for(;Date.now()-i<s;){const r=ne(o);if(r){const c=r.getBoundingClientRect();if(c.width>0&&c.height>0)return await $e(r,a,t),r}await new Promise(c=>setTimeout(c,40))}return ne(o)}const K=e.ref(!1),we=e.ref([]),I=e.ref([]),k=e.ref(0),T=e.ref(!1),Z=e.ref("start"),U=e.ref(typeof window<"u"?window.innerWidth:1024);let ie;const L=e.ref({storageKey:"v-tutorial-completed",autoScroll:!0,scrollBehavior:"smooth",spotlightPadding:6,cardWidth:370,showArrow:!0,unstyled:!1,mobileSheetOnAuto:!0,breakpoints:{...ve}}),De=new Map,re=new Set,se=new Set,ee=new Set,ye=e.computed(()=>({...ve,...L.value.breakpoints||{}})),ce=e.computed(()=>Me(U.value,ye.value)),ze=e.computed(()=>U.value<ye.value.md),mt=e.computed(()=>I.value.length>0?I.value:we.value),b=e.computed(()=>{const o=ce.value;return mt.value.map(a=>Re(a,o)).filter(a=>!a.disabled)}),F=e.computed(()=>b.value[k.value]||null),Ie=e.computed(()=>b.value.length),We=e.computed(()=>k.value<=0),Xe=e.computed(()=>b.value.length>0&&k.value===b.value.length-1),Ke=e.computed(()=>b.value.length?Math.round((k.value+1)/b.value.length*100):0),te=e.computed(()=>L.value.storageKey||"v-tutorial-completed");async function Y(o,...a){try{const t=De.get(o);if(t)return await t(...a)}catch(t){console.warn(`[v-tutorial] Erro ao executar ação "${o}":`,t)}}async function _(o){if(o){if(Array.isArray(o)){for(const a of o)await Y(a);await e.nextTick();return}for(const[a,t]of Object.entries(o))Array.isArray(t)?await Y(a,...t):t===void 0?await Y(a):await Y(a,t);await e.nextTick()}}async function ke(o){var a,t;if(!(!o||!ie))try{const s=(t=(a=ie.currentRoute)==null?void 0:a.value)==null?void 0:t.path;s&&s!==o&&(await ie.push(o),await e.nextTick())}catch(s){console.warn(`[v-tutorial] Erro ao navegar para rota "${o}":`,s)}}function D(o=Z.value){return{currentStepIndex:k.value,currentStep:F.value,totalSteps:Ie.value,progress:Ke.value,isFirstStep:We.value,isLastStep:Xe.value,direction:o,activeBreakpoint:ce.value,viewportWidth:U.value,isMobileViewport:ze.value,nextStep:ue,prevStep:Fe,goToStep:de,endTutorial:je,restartTutorial:_e,runRegisteredAction:Y,runActionMap:_}}async function be(o,a=1200){if(!o||!o.target||o.placement==="center")return null;const t=o.autoScroll??L.value.autoScroll??!0,s=L.value.scrollBehavior||"smooth";return Le(o,t,s,a)}async function de(o,a="forward"){const t=typeof o=="number"?o:b.value.findIndex(i=>i.id===o);if(t<0||t>=b.value.length)return;T.value=!0,Z.value=a;try{const i=b.value[k.value];i&&K.value&&k.value!==t&&(i.leaveActions&&await _(i.leaveActions),i.afterLeave&&await i.afterLeave(D(a))),k.value=t;const r=b.value[t],c=D(a);a==="backward"&&((r!=null&&r.rollbackRoute||r!=null&&r.route)&&await ke(r.rollbackRoute||r.route),r!=null&&r.rollbackActions&&await _(r.rollbackActions),r!=null&&r.onRollback&&await r.onRollback(c)),r!=null&&r.route&&await ke(r.route),r!=null&&r.enterActions&&await _(r.enterActions),r!=null&&r.beforeEnter&&await r.beforeEnter(c),await e.nextTick(),await be(r)}catch(i){console.error("[v-tutorial] Erro durante transição de passo:",i)}finally{T.value=!1}const s=D(a);ee.forEach(i=>i(s))}async function ue(){T.value||(k.value<b.value.length-1?await de(k.value+1,"forward"):qe())}async function Fe(){T.value||k.value>0&&await de(k.value-1,"backward")}function ht(o){we.value=o}function gt(o){const a=I.value.findIndex(t=>t.id===o.id);a>=0?I.value[a]=o:I.value.push(o)}function vt(o){const a=I.value.findIndex(t=>t.id===o.id);a>=0&&(I.value[a]=o)}function wt(o){I.value=I.value.filter(a=>a.id!==o)}function He(o){o.router&&(ie=o.router);const{router:a,...t}=o;L.value={...L.value,...t,breakpoints:{...L.value.breakpoints,...t.breakpoints},labels:{...L.value.labels,...t.labels},classes:{...L.value.classes,...t.classes}}}async function Oe(o,a=!1){if(typeof window<"u"&&(U.value=window.innerWidth),o&&o.length>0&&(we.value=o),!(!a&&typeof window<"u"&&localStorage.getItem(te.value)==="true")&&b.value.length){K.value=!0,k.value=0,Z.value="start",T.value=!0;try{const t=b.value[0],s=D("start");t!=null&&t.route&&await ke(t.route),t!=null&&t.enterActions&&await _(t.enterActions),t!=null&&t.beforeEnter&&await t.beforeEnter(s),await e.nextTick(),await be(t)}catch(t){console.error("[v-tutorial] Erro ao iniciar tutorial:",t)}finally{T.value=!1}ee.forEach(t=>t(D("start")))}}async function _e(){typeof window<"u"&&localStorage.removeItem(te.value),await Oe(void 0,!0)}function qe(){typeof window<"u"&&localStorage.setItem(te.value,"true"),T.value=!1,K.value=!1;const o=D("forward");re.forEach(a=>a(o))}function je(o=!0){o&&typeof window<"u"&&localStorage.setItem(te.value,"true"),T.value=!1,K.value=!1;const a=D(Z.value);se.forEach(t=>t(a))}async function yt(o){if(!K.value||T.value)return;const a=F.value;if(!a||!a.target||a.placement==="center")return;const t=Q(a),s=o.target;if(!s||!t.length)return;const i=t.find(n=>n.contains(s));if(!i)return;const r=i.getAttribute("data-tutorial-id")||"",c=N.get(r);(a.preventNativeClick??(c==null?void 0:c.config.preventNativeClick)??!1)&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation());const m=D("forward");if(c!=null&&c.config.onTutorialClick&&await c.config.onTutorialClick(o,m),a.onTargetClick&&await a.onTargetClick(o,m),a.mode==="wait-click"||a.mode==="optional-click"){T.value=!0;const n=a.afterClickDelay??280;setTimeout(async()=>{try{a.afterClick&&await a.afterClick(D("forward"))}finally{T.value=!1}await ue()},n)}}typeof window<"u"&&(window.addEventListener("click",yt,!0),window.addEventListener("resize",()=>{U.value=window.innerWidth},{passive:!0})),e.watch(ce,async()=>{if(!K.value||T.value)return;k.value>=b.value.length&&(k.value=Math.max(0,b.value.length-1));const o=F.value;o!=null&&o.enterActions&&await _(o.enterActions),await be(o,600)});function fe(o){o&&He(o);function a(l,m){const n=typeof m=="string"?{id:m}:m,v=h=>{h?(h.setAttribute("data-tutorial-id",n.id),N.set(n.id,{el:h,config:n})):N.delete(n.id)};"value"in l?e.watch(l,h=>v(h),{immediate:!0}):v(l)}function t(l,m,n){return async(...v)=>{var h,d,C,y;if(K.value){const B=Array.isArray((h=F.value)==null?void 0:h.target)?(d=F.value)==null?void 0:d.target:[(C=F.value)==null?void 0:C.target],P=((y=F.value)==null?void 0:y.id)===l||B.includes(l);n!=null&&n.tutorialFn&&await n.tutorialFn(...v),n!=null&&n.preventNativeWhenActive||await m(...v),P&&((n==null?void 0:n.autoAdvance)??!0)&&await ue();return}return m(...v)}}function s(l,m){De.set(l,m)}function i(l){return re.add(l),e.getCurrentScope()&&e.onScopeDispose(()=>re.delete(l)),()=>re.delete(l)}function r(l){return se.add(l),e.getCurrentScope()&&e.onScopeDispose(()=>se.delete(l)),()=>se.delete(l)}function c(l){return ee.add(l),e.getCurrentScope()&&e.onScopeDispose(()=>ee.delete(l)),()=>ee.delete(l)}return{isActive:K,steps:b,currentStepIndex:k,currentStep:F,totalSteps:Ie,progress:Ke,isFirstStep:We,isLastStep:Xe,isTransitioning:T,lastDirection:Z,activeBreakpoint:ce,viewportWidth:U,isMobileViewport:ze,mergedBreakpoints:ye,storageKey:te,globalOptions:L,configureTutorial:He,registerSteps:ht,registerDeclarativeStep:gt,updateDeclarativeStep:vt,unregisterDeclarativeStep:wt,startTutorial:Oe,restartTutorial:_e,nextStep:ue,prevStep:Fe,goToStep:de,endTutorial:je,completeTutorial:qe,resolveStepElement:ne,resolveStepElements:Q,getStepBoundingRect:Ve,registerTarget:a,wrapTutorialAction:t,registerAction:s,runRegisteredAction:Y,runActionMap:_,onFinish:i,onStop:r,onStepChange:c,getContext:D}}const Ue={mounted(o,a){if(!a.value)return;const t=typeof a.value=="string"?{id:a.value}:a.value;t!=null&&t.id&&(o.setAttribute("data-tutorial-id",t.id),N.set(t.id,{el:o,config:t}))},updated(o,a){if(!a.value){const s=o.getAttribute("data-tutorial-id");if(s){const i=N.get(s);(i==null?void 0:i.el)===o&&N.delete(s),o.removeAttribute("data-tutorial-id")}return}const t=typeof a.value=="string"?{id:a.value}:a.value;t!=null&&t.id&&(o.setAttribute("data-tutorial-id",t.id),N.set(t.id,{el:o,config:t}))},unmounted(o,a){var s;const t=typeof a.value=="string"?a.value:((s=a.value)==null?void 0:s.id)||o.getAttribute("data-tutorial-id");if(t){const i=N.get(t);(i==null?void 0:i.el)===o&&N.delete(t)}}};function Ye(o){const{hasTargetBox:a,spotlightBox:t,viewportW:s,viewportH:i,maxCardW:r,cardHeight:c,requestedPlacement:l,isMobileViewport:m,useMobileSheet:n}=o,v=Math.min(r,s-24);if(!a)return{resolvedPlacement:"center",cardStyle:{top:"50%",left:"50%",width:`${v}px`,transform:"translate(-50%, -50%)"},arrowStyle:null};const h=14;let d=l||"auto";const C=s-(t.x+t.width),y=t.x,B=i-(t.y+t.height),P=t.y;if(m&&n&&(d==="auto"||d==="left"||d==="right")&&(d=B>=P?"bottom-sheet":"top-sheet"),d==="top-sheet"||d==="bottom-sheet"){const E=Math.min(s-20,440),V=Math.round((s-E)/2),$=12,q=$+c,Te=i-12-c,Ce=i-12,pe=t.y<q+10&&t.y+t.height>$-10,me=t.y<Ce+10&&t.y+t.height>Te-10;if(d==="top-sheet"&&pe){if(!me)d="bottom-sheet";else if(B>=P){const f=Math.min(i-c-10,t.y+t.height+12);return{resolvedPlacement:"bottom",cardStyle:{top:`${Math.max(12,f)}px`,left:`${V}px`,bottom:"auto",width:`${E}px`,transform:"none"},arrowStyle:{left:`${Math.max(24,Math.min(E-24,t.x+t.width/2-V))}px`}}}}if(d==="bottom-sheet"&&me){if(!pe)d="top-sheet";else if(P>B)return{resolvedPlacement:"top",cardStyle:{top:`${Math.max(12,t.y-c-12)}px`,left:`${V}px`,bottom:"auto",width:`${E}px`,transform:"none"},arrowStyle:{left:`${Math.max(24,Math.min(E-24,t.x+t.width/2-V))}px`}}}if(d==="bottom-sheet")return{resolvedPlacement:"bottom-sheet",cardStyle:{bottom:"12px",left:`${V}px`,top:"auto",width:`${E}px`,transform:"none"},arrowStyle:null};if(d==="top-sheet")return{resolvedPlacement:"top-sheet",cardStyle:{top:"12px",left:`${V}px`,bottom:"auto",width:`${E}px`,transform:"none"},arrowStyle:null}}if(d==="auto"){const E=[{dir:"right",space:C,minReq:v+h+16},{dir:"left",space:y,minReq:v+h+16},{dir:"bottom",space:B,minReq:c+h+16},{dir:"top",space:P,minReq:c+h+16}],V=E.filter($=>$.space>=$.minReq);V.length>0?d=V.sort(($,q)=>q.space-$.space)[0].dir:d=E.sort(($,q)=>q.space-$.space)[0].dir}else d==="right"&&C<v+h&&y>C?d="left":d==="left"&&y<v+h&&C>y?d="right":d==="bottom"&&B<c+h&&P>B?d="top":d==="top"&&P<c+h&&B>P&&(d="bottom");let S=t.y,M=t.x;d==="right"?(M=t.x+t.width+h,S=t.y+t.height/2-c/2):d==="left"?(M=t.x-v-h,S=t.y+t.height/2-c/2):d==="bottom"?(S=t.y+t.height+h,M=t.x+t.width/2-v/2):d==="top"&&(S=t.y-c-h,M=t.x+t.width/2-v/2),M=Math.max(12,Math.min(M,s-v-12)),S=Math.max(12,Math.min(S,i-c-12));const G=M<t.x+t.width&&M+v>t.x,J=S<t.y+t.height&&S+c>t.y;G&&J&&(B>=P?(S=Math.min(i-c-10,t.y+t.height+12),d="bottom"):(S=Math.max(12,t.y-c-12),d="top"));const Ee=t.x+t.width/2,ae=t.y+t.height/2;let oe=null;return d==="right"||d==="left"?oe={top:`${Math.max(22,Math.min(c-22,ae-S))}px`}:(d==="bottom"||d==="top")&&(oe={left:`${Math.max(24,Math.min(v-24,Ee-M))}px`}),{resolvedPlacement:d,cardStyle:{top:`${S}px`,left:`${M}px`,bottom:"auto",width:`${v}px`,transform:"none"},arrowStyle:oe}}const xe=Symbol("SISTEC_TUTORIAL_PROVIDER_KEY"),kt=["innerHTML"],bt={class:"v-tutorial-nav-group d-flex align-items-center gap-2"},xt={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5","stroke-linecap":"round","stroke-linejoin":"round"},St={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},Ge=e.defineComponent({__name:"TutorialProvider",props:{steps:{},storageKey:{},autoStart:{type:Boolean,default:!1},startDelay:{default:400},unstyled:{type:Boolean,default:void 0},showArrow:{type:Boolean,default:void 0},mobileSheetOnAuto:{type:Boolean,default:void 0},breakpoints:{},spotlightPadding:{},cardWidth:{},labels:{},classes:{}},emits:["finish","stop","step-change"],setup(o,{emit:a}){const t=o,s=a,{isActive:i,steps:r,currentStepIndex:c,currentStep:l,isTransitioning:m,progress:n,isFirstStep:v,isLastStep:h,activeBreakpoint:d,isMobileViewport:C,globalOptions:y,configureTutorial:B,registerSteps:P,startTutorial:S,restartTutorial:M,nextStep:G,prevStep:J,goToStep:Ee,endTutorial:ae,resolveStepElements:oe,getStepBoundingRect:E,registerDeclarativeStep:V,updateDeclarativeStep:$,unregisterDeclarativeStep:q,onFinish:Te,onStop:Ce,onStepChange:pe,getContext:me}=fe();(t.storageKey||t.breakpoints||t.mobileSheetOnAuto!==void 0)&&B({...t.storageKey?{storageKey:t.storageKey}:{},...t.breakpoints?{breakpoints:t.breakpoints}:{},...t.mobileSheetOnAuto!==void 0?{mobileSheetOnAuto:t.mobileSheetOnAuto}:{}}),e.provide(xe,{registerDeclarativeStep:V,updateDeclarativeStep:$,unregisterDeclarativeStep:q,activeStepId:e.computed(()=>{var u;return((u=l.value)==null?void 0:u.id)||null})}),Te(()=>s("finish")),Ce(()=>s("stop")),pe(u=>s("step-change",u.currentStep,u.currentStepIndex));const f=e.computed(()=>t.unstyled??y.value.unstyled??!1),Et=e.computed(()=>t.showArrow??y.value.showArrow??!0),H=e.computed(()=>{var u,p,R,tt,at,ot,lt,nt,it,rt,st,ct,dt,ut,ft,pt;return{skipTutorial:((u=t.labels)==null?void 0:u.skipTutorial)??((p=y.value.labels)==null?void 0:p.skipTutorial)??"Pular tutorial",previous:((R=t.labels)==null?void 0:R.previous)??((tt=y.value.labels)==null?void 0:tt.previous)??"Anterior",next:((at=t.labels)==null?void 0:at.next)??((ot=y.value.labels)==null?void 0:ot.next)??"Próximo",finish:((lt=t.labels)==null?void 0:lt.finish)??((nt=y.value.labels)==null?void 0:nt.finish)??"Concluir",waitingClick:((it=t.labels)==null?void 0:it.waitingClick)??((rt=y.value.labels)==null?void 0:rt.waitingClick)??"Aguardando clique...",interactiveBadge:((st=t.labels)==null?void 0:st.interactiveBadge)??((ct=y.value.labels)==null?void 0:ct.interactiveBadge)??"Interativo",defaultHint:((dt=t.labels)==null?void 0:dt.defaultHint)??((ut=y.value.labels)==null?void 0:ut.defaultHint)??"Clique no item destacado na tela para continuar!",stepCounter:((ft=t.labels)==null?void 0:ft.stepCounter)??((pt=y.value.labels)==null?void 0:pt.stepCounter)??((At,Bt)=>`Passo ${At} de ${Bt}`)}}),w=e.computed(()=>({...y.value.classes,...t.classes})),W=e.computed(()=>({...me(),step:l.value,stepIndex:c.value,totalSteps:r.value.length,progress:n.value,isFirstStep:v.value,isLastStep:h.value,nextStep:G,prevStep:J,goToStep:Ee,endTutorial:ae,restartTutorial:M})),he=e.ref(null),z=e.ref(null),Ae=e.ref({w:typeof window<"u"?window.innerWidth:1024,h:typeof window<"u"?window.innerHeight:768});let X=null,Qe=0,A=null;const Tt=e.computed(()=>{var u;return((u=l.value)==null?void 0:u.spotlightPadding)??t.spotlightPadding??y.value.spotlightPadding??6}),Be=e.computed(()=>{var u;return!!((u=l.value)!=null&&u.target)&&l.value.placement!=="center"&&!!z.value&&z.value.width>0&&z.value.height>0}),x=e.computed(()=>{if(!z.value)return{x:0,y:0,width:0,height:0};const u=Tt.value;return{x:Math.max(2,z.value.left-u),y:Math.max(2,z.value.top-u),width:z.value.width+u*2,height:z.value.height+u*2}}),le=e.computed(()=>{var u,p,R;return Ye({hasTargetBox:Be.value,spotlightBox:x.value,viewportW:Ae.value.w,viewportH:Ae.value.h,maxCardW:((u=l.value)==null?void 0:u.cardWidth)??t.cardWidth??y.value.cardWidth??370,cardHeight:((p=he.value)==null?void 0:p.offsetHeight)||245,requestedPlacement:((R=l.value)==null?void 0:R.placement)||"auto",isMobileViewport:C.value,useMobileSheet:t.mobileSheetOnAuto??y.value.mobileSheetOnAuto??!0})});function Ze(){var u;if(i.value){if(Ae.value={w:window.innerWidth,h:window.innerHeight},!((u=l.value)!=null&&u.target)||l.value.placement==="center"){z.value=null;return}z.value=E(l.value)}}function Pe(u=500){if(Qe=performance.now()+u,X!==null)return;const p=R=>{Ze(),i.value&&R<Qe?X=requestAnimationFrame(p):X=null};X=requestAnimationFrame(p)}function Ct(){if(A&&A.disconnect(),typeof ResizeObserver>"u"||!i.value)return;A=new ResizeObserver(()=>{Pe(350)}),oe(l.value).forEach(p=>A==null?void 0:A.observe(p)),he.value&&A.observe(he.value)}function O(){i.value&&Pe(400)}function et(u){var p;i.value&&(u.key==="Escape"?ae(!0):u.key==="ArrowRight"&&((p=l.value)==null?void 0:p.mode)!=="wait-click"?G():u.key==="ArrowLeft"&&J())}return e.watch(()=>t.steps,u=>{u&&u.length>0&&P(u)},{immediate:!0,deep:!0}),e.watch(()=>{var u,p;return[i.value,m.value,c.value,d.value,(u=l.value)==null?void 0:u.target,(p=l.value)==null?void 0:p.placement]},()=>{if(!i.value){X&&(cancelAnimationFrame(X),X=null),A==null||A.disconnect();return}Ze(),Ct(),Pe(600)},{immediate:!0}),e.onMounted(()=>{window.addEventListener("keydown",et),window.addEventListener("resize",O,{passive:!0}),window.addEventListener("scroll",O,{passive:!0,capture:!0}),window.addEventListener("transitionrun",O,{passive:!0,capture:!0}),window.addEventListener("animationstart",O,{passive:!0,capture:!0}),t.autoStart&&setTimeout(()=>{S()},t.startDelay)}),e.onUnmounted(()=>{window.removeEventListener("keydown",et),window.removeEventListener("resize",O),window.removeEventListener("scroll",O,!0),window.removeEventListener("transitionrun",O,!0),window.removeEventListener("animationstart",O,!0),X&&cancelAnimationFrame(X),A==null||A.disconnect()}),(u,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(u.$slots,"default"),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"tutorial-fade"},{default:e.withCtx(()=>[e.unref(i)&&e.unref(l)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([!f.value&&"v-tutorial-root",!f.value&&`breakpoint-${e.unref(d)}`,w.value.root])},[e.renderSlot(u.$slots,"exit-button",e.normalizeProps(e.guardReactiveProps(W.value))),Be.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"sistec-click-shield",w.value.shield]),style:e.normalizeStyle({top:"0px",left:"0px",width:"100vw",height:`${x.value.y}px`})},null,6),e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"sistec-click-shield",w.value.shield]),style:e.normalizeStyle({top:`${x.value.y+x.value.height}px`,left:"0px",width:"100vw",bottom:"0px"})},null,6),e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"sistec-click-shield",w.value.shield]),style:e.normalizeStyle({top:`${x.value.y}px`,left:"0px",width:`${x.value.x}px`,height:`${x.value.height}px`})},null,6),e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"sistec-click-shield",w.value.shield]),style:e.normalizeStyle({top:`${x.value.y}px`,left:`${x.value.x+x.value.width}px`,right:"0px",height:`${x.value.height}px`})},null,6),e.renderSlot(u.$slots,"spotlight",e.mergeProps(W.value,{spotlightBox:x.value}),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-spotlight-ring",!f.value&&e.unref(l).mode==="wait-click"&&"is-wait-click",w.value.spotlight]),style:e.normalizeStyle({top:`${x.value.y}px`,left:`${x.value.x}px`,width:`${x.value.width}px`,height:`${x.value.height}px`})},null,6)])],64)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([!f.value&&"sistec-full-backdrop",w.value.backdrop])},null,2)),e.createElementVNode("div",{ref_key:"cardRef",ref:he,class:e.normalizeClass([!f.value&&"v-tutorial-card",!f.value&&`is-placement-${le.value.resolvedPlacement}`,w.value.card]),style:e.normalizeStyle(le.value.cardStyle),role:"dialog","aria-modal":"true"},[Be.value&&Et.value&&le.value.arrowStyle?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([!f.value&&"v-tutorial-arrow",!f.value&&`arrow-${le.value.resolvedPlacement}`,w.value.arrow]),style:e.normalizeStyle(le.value.arrowStyle)},null,6)):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"card",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.renderSlot(u.$slots,"header",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-card-header",w.value.header])},[e.createElementVNode("span",{class:e.normalizeClass([!f.value&&"v-tutorial-step-badge",w.value.badge])},e.toDisplayString(H.value.stepCounter(e.unref(c)+1,e.unref(r).length)),3),e.unref(l).mode==="wait-click"?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([!f.value&&"v-tutorial-mode-tag",w.value.modeTag])},e.toDisplayString(H.value.interactiveBadge),3)):e.createCommentVNode("",!0)],2)]),e.renderSlot(u.$slots,"body",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-card-body",w.value.body])},[e.createElementVNode("h3",{class:e.normalizeClass([!f.value&&"v-tutorial-title",w.value.title])},e.toDisplayString(e.unref(l).title),3),e.unref(l).component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l).component),e.mergeProps({key:0},e.unref(l).componentProps,{context:W.value}),null,16,["context"])):e.unref(l).content?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([!f.value&&"v-tutorial-content",w.value.content]),innerHTML:e.unref(l).content},null,10,kt)):e.createCommentVNode("",!0),e.createElementVNode("div",{id:"v-tutorial-step-slot-anchor",class:e.normalizeClass([!f.value&&"v-tutorial-content",w.value.content])},null,2)],2)]),e.unref(l).mode==="wait-click"||e.unref(l).mode==="optional-click"?e.renderSlot(u.$slots,"hint",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-click-banner",w.value.hintBanner])},[p[3]||(p[3]=e.createElementVNode("svg",{class:"pulse-click-icon",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("path",{d:"M3 12l3 0"}),e.createElementVNode("path",{d:"M12 3l0 3"}),e.createElementVNode("path",{d:"M7.8 7.8l-2.2 -2.2"}),e.createElementVNode("path",{d:"M16.2 7.8l2.2 -2.2"}),e.createElementVNode("path",{d:"M7.8 16.2l-2.2 2.2"}),e.createElementVNode("path",{d:"M12 12l9 3l-4 2l-2 4l-3 -9"})],-1)),e.createElementVNode("span",null,e.toDisplayString(e.unref(l).hintText||H.value.defaultHint),1)],2)],void 0,0):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"progress",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-progress",w.value.progressContainer])},[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-progress-bar",w.value.progressBar]),style:e.normalizeStyle({width:`${e.unref(n)}%`})},null,6)],2)]),e.renderSlot(u.$slots,"footer",e.normalizeProps(e.guardReactiveProps(W.value)),()=>[e.createElementVNode("div",{class:e.normalizeClass([!f.value&&"v-tutorial-card-footer",w.value.footer])},[e.createElementVNode("button",{type:"button",class:e.normalizeClass([!f.value&&"v-tutorial-btn-skip btn btn-sm btn-outline-danger fw-semibold px-2 py-1",w.value.skipButton]),onClick:p[0]||(p[0]=e.withModifiers(R=>e.unref(ae)(!0),["prevent"]))},e.toDisplayString(H.value.skipTutorial),3),e.createElementVNode("div",bt,[e.unref(c)>0?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass([!f.value&&"v-tutorial-btn-prev btn btn-sm btn-ghost-secondary d-inline-flex align-items-center gap-1",w.value.prevButton]),onClick:p[1]||(p[1]=e.withModifiers((...R)=>e.unref(J)&&e.unref(J)(...R),["prevent"]))},[p[4]||(p[4]=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("path",{d:"M15 6l-6 6l6 6"})],-1)),e.createElementVNode("span",null,e.toDisplayString(H.value.previous),1)],2)):e.createCommentVNode("",!0),e.unref(l).mode!=="wait-click"?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:e.normalizeClass([!f.value&&"v-tutorial-btn-next btn btn-sm btn-primary d-inline-flex align-items-center gap-1 px-3 fw-bold",w.value.nextButton]),onClick:p[2]||(p[2]=e.withModifiers((...R)=>e.unref(G)&&e.unref(G)(...R),["prevent"]))},[e.createElementVNode("span",null,e.toDisplayString(e.unref(h)?H.value.finish:H.value.next),1),e.unref(h)?(e.openBlock(),e.createElementBlock("svg",xt,[...p[5]||(p[5]=[e.createElementVNode("path",{d:"M5 12l5 5l10 -10"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",St,[...p[6]||(p[6]=[e.createElementVNode("path",{d:"M9 6l6 6l-6 6"},null,-1)])]))],2)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([!f.value&&"sistec-wait-pill",w.value.waitPill])},e.toDisplayString(H.value.waitingClick),3))])],2)])])],6)],2)):e.createCommentVNode("",!0)]),_:3})]))],64))}}),Se=e.defineComponent({__name:"TutorialStep",props:{id:{},target:{},title:{},content:{},component:{},componentProps:{},mode:{default:"info"},placement:{default:"auto"},hintText:{},preventNativeClick:{type:Boolean},afterClickDelay:{},autoScroll:{type:Boolean},spotlightPadding:{},cardWidth:{},disabled:{type:Boolean,default:!1},route:{},rollbackRoute:{},enterActions:{},rollbackActions:{},leaveActions:{},breakpoints:{},targetSm:{},targetMd:{},targetLg:{},targetXl:{},targetXxl:{},placementSm:{},placementMd:{},placementLg:{},placementXl:{},placementXxl:{},beforeEnter:{},onRollback:{},onTargetClick:{},afterClick:{},afterLeave:{}},setup(o){const a=o,t=e.inject(xe,null),{currentStep:s,registerDeclarativeStep:i,updateDeclarativeStep:r,unregisterDeclarativeStep:c,getContext:l}=fe(),m=a.id||`tutorial-step-${Math.random().toString(36).substring(2,9)}`,n=e.ref(!1),v=e.computed(()=>{var C;return((t==null?void 0:t.activeStepId.value)??((C=s.value)==null?void 0:C.id))===m});function h(){return{id:m,target:a.target,title:a.title,content:a.content,component:a.component,componentProps:a.componentProps,mode:a.mode,placement:a.placement,hintText:a.hintText,preventNativeClick:a.preventNativeClick,afterClickDelay:a.afterClickDelay,autoScroll:a.autoScroll,spotlightPadding:a.spotlightPadding,cardWidth:a.cardWidth,disabled:a.disabled,route:a.route,rollbackRoute:a.rollbackRoute,enterActions:a.enterActions,rollbackActions:a.rollbackActions,leaveActions:a.leaveActions,breakpoints:a.breakpoints,targetSm:a.targetSm,targetMd:a.targetMd,targetLg:a.targetLg,targetXl:a.targetXl,targetXxl:a.targetXxl,placementSm:a.placementSm,placementMd:a.placementMd,placementLg:a.placementLg,placementXl:a.placementXl,placementXxl:a.placementXxl,beforeEnter:a.beforeEnter,onRollback:a.onRollback,onTargetClick:a.onTargetClick,afterClick:a.afterClick,afterLeave:a.afterLeave}}return e.watch(v,async d=>{d?(await e.nextTick(),n.value=!!document.getElementById("v-tutorial-step-slot-anchor")):n.value=!1},{immediate:!0}),e.watch(()=>[a.target,a.targetSm,a.targetMd,a.targetLg,a.targetXl,a.targetXxl,a.title,a.content,a.mode,a.placement,a.placementSm,a.placementMd,a.placementLg,a.placementXl,a.placementXxl,a.hintText,a.disabled,a.route,a.rollbackRoute,a.breakpoints],()=>{const d=h();t?t.updateDeclarativeStep(d):r(d)}),e.onMounted(()=>{const d=h();t?t.registerDeclarativeStep(d):i(d)}),e.onUnmounted(()=>{t?t.unregisterDeclarativeStep(m):c(m)}),(d,C)=>v.value&&n.value&&d.$slots.default?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"#v-tutorial-step-slot-anchor"},[e.renderSlot(d.$slots,"default",{context:e.unref(l)()})])):e.createCommentVNode("",!0)}}),Je={install(o,a){if(a){const{configureTutorial:t}=fe();t(a)}o.directive("tutorial",Ue),o.component("TutorialProvider",Ge),o.component("VTutorialStep",Se)}};g.BOOTSTRAP_BREAKPOINT_ORDER=ge,g.DEFAULT_BOOTSTRAP_BREAKPOINTS=ve,g.TUTORIAL_PROVIDER_KEY=xe,g.TutorialPlugin=Je,g.TutorialProvider=Ge,g.TutorialStepComponent=Se,g.VTutorialStep=Se,g.aguardarElementoNoDom=Le,g.calcularBreakpointAtivo=Me,g.calcularPosicaoCard=Ye,g.default=Je,g.getStepBoundingRect=Ve,g.registeredElements=N,g.resolveStepElement=ne,g.resolveStepElements=Q,g.resolverPassoResponsivo=Re,g.resolverSeletorUnico=Ne,g.rolarParaElementoSeNecessario=$e,g.useTutorial=fe,g.vTutorial=Ue,g.verificarElementoVisivel=j,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/package.json CHANGED
@@ -1,6 +1,91 @@
1
1
  {
2
2
  "name": "v-tutorial",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "private": false,
4
+ "version": "1.0.1",
5
+ "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
6
+ "license": "MIT",
7
+ "homepage": "https://github.com/marlon-bento/v-tutorial#readme",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/marlon-bento/v-tutorial.git"
11
+ },
12
+ "bugs": {
13
+ "url": "https://github.com/marlon-bento/v-tutorial/issues"
14
+ },
15
+ "description": "100% Interactive, Mobile-First (Bootstrap-style) & Headless-ready guided tours, product walkthrough and user onboarding library for Vue 3",
16
+ "keywords": [
17
+ "vue",
18
+ "vue3",
19
+ "vue-3",
20
+ "v-tutorial",
21
+ "tutorial",
22
+ "onboarding",
23
+ "user-onboarding",
24
+ "tour",
25
+ "guided-tour",
26
+ "product-tour",
27
+ "walkthrough",
28
+ "step-by-step",
29
+ "spotlight",
30
+ "coach-mark",
31
+ "feature-discovery",
32
+ "interactive-tour",
33
+ "joyride",
34
+ "driver.js",
35
+ "shepherd",
36
+ "intro.js",
37
+ "vue-tour",
38
+ "vue-onboarding",
39
+ "vue-router",
40
+ "directive",
41
+ "composable",
42
+ "mobile-first",
43
+ "responsive",
44
+ "bottom-sheet",
45
+ "headless",
46
+ "typescript"
47
+ ],
48
+ "sideEffects": [
49
+ "**/*.css",
50
+ "**/*.scss"
51
+ ],
52
+ "type": "module",
53
+ "files": [
54
+ "dist",
55
+ "README.md",
56
+ "README.pt-BR.md"
57
+ ],
58
+ "main": "./dist/v-tutorial.umd.cjs",
59
+ "module": "./dist/v-tutorial.js",
60
+ "types": "./dist/index.d.ts",
61
+ "exports": {
62
+ ".": {
63
+ "types": "./dist/index.d.ts",
64
+ "import": "./dist/v-tutorial.js",
65
+ "require": "./dist/v-tutorial.umd.cjs"
66
+ },
67
+ "./style.css": "./dist/style.css",
68
+ "./dist/style.css": "./dist/style.css"
69
+ },
70
+ "scripts": {
71
+ "dev": "vite",
72
+ "build": "vue-tsc --noEmit && vite build",
73
+ "build:watch": "vite build --watch",
74
+ "typecheck": "vue-tsc --noEmit"
75
+ },
76
+ "peerDependencies": {
77
+ "vue": "^3.3.0"
78
+ },
79
+ "devDependencies": {
80
+ "@release-it/conventional-changelog": "^11.0.1",
81
+ "@types/node": "^20.0.0",
82
+ "@vitejs/plugin-vue": "^5.0.0",
83
+ "release-it": "^20.2.1",
84
+ "sass-embedded": "^1.80.0",
85
+ "typescript": "^5.4.0",
86
+ "vite": "^5.4.0",
87
+ "vite-plugin-dts": "^4.3.0",
88
+ "vue": "^3.4.0",
89
+ "vue-tsc": "^2.0.0"
90
+ }
91
+ }