v-tutorial 0.0.0-stage → 1.0.0
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/README.md +339 -2
- package/README.pt-BR.md +341 -0
- package/dist/TutorialProvider.vue.d.ts +224 -0
- package/dist/TutorialStep.vue.d.ts +66 -0
- package/dist/domResolver.d.ts +12 -0
- package/dist/index.d.ts +25 -0
- package/dist/keys.d.ts +3 -0
- package/dist/positioning.d.ts +23 -0
- package/dist/responsive.d.ts +5 -0
- package/dist/style.css +1 -0
- package/dist/types.d.ts +152 -0
- package/dist/useTutorial.d.ts +180 -0
- package/dist/v-tutorial.js +1214 -0
- package/dist/v-tutorial.umd.cjs +1 -0
- package/package.json +88 -3
|
@@ -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
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.0.0",
|
|
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
|
+
}
|
|
6
91
|
}
|