vuux/dist/lib/Tour/src/hook/useTour.cjs

Vue3 Nuxt3 Nuxt4 组件库

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),T=require("@vuux/utils"),z=(f,m)=>{const t=l.reactive({x:0,y:0,w:0,h:0,border:4,isShowSvg:!1,currentStep:0,isTop:!1,isBottom:!1}),p=l.ref({top:"",left:""}),a=l.ref(null),g=l.ref(null),S=l.computed(()=>f.data.length),d=l.ref([]),H=l.computed(()=>{const{x:n,y:o,w:s,h:i,border:e}=t,{width:w,height:r}=T.Utils.windowSize(),u=Math.max(s-2*e,0),v=Math.max(i-2*e,0);return`
    M${w},0 L0,0 L0,${r} L${w},${r} L${w},0 Z
    M${n},${o+e} 
    a${e},${e} 0 0 1 ${e},-${e} 
    h${u} 
    a${e},${e} 0 0 1 ${e},${e} 
    v${v} 
    a${e},${e} 0 0 1 -${e},${e} 
    h-${u} 
    a${e},${e} 0 0 1 -${e},-${e} 
    v-${v} z
  `}),M=n=>{const o=n.getBoundingClientRect();return{w:Math.round(o.width)+12,h:Math.round(o.height)+12,x:Math.round(o.left)-6,y:Math.round(o.top)-6}},W=(n,o=30)=>{const s=n.getBoundingClientRect(),i=window.innerHeight;return s.top<o?(window.scrollBy({top:s.top-o,behavior:"smooth"}),!0):s.bottom>i-o?(window.scrollBy({top:s.bottom-i+o,behavior:"smooth"}),!0):!1},$=async n=>{const o=d.value[n];if(!o)return;await l.nextTick();const s=M(o);if(t.x=s.x,t.y=s.y,t.w=s.w,t.h=s.h,t.isShowSvg=!0,!a.value)return;const i=a.value;i.style.bottom="auto",W(o,30),await l.nextTick();const e=window.innerHeight,w=window.innerWidth,r=M(o),u=i.offsetWidth,v=i.offsetHeight;let h=r.y+r.h+12,E=!1,L=!0;h+v+30>e&&(h=r.y-v-12,E=!0,L=!1),h=Math.max(h,30);let c=r.x+r.w/2-u/2;if(c<10&&(c=10),c+u+10>w&&(c=w-u-10),i.style.top=`${h}px`,i.style.left=`${c}px`,g.value){let y=r.x+r.w/2-c-6;y=Math.max(6,Math.min(y,u-6)),g.value.style.left=`${y}px`}t.x=r.x,t.y=r.y,t.w=r.w,t.h=r.h,n===0&&(p.value.top=`${h}px`,p.value.left=`${c}px`),t.isTop=E,t.isBottom=L},x=()=>{!f.modelValue||!d.value.length||!a.value||!d.value[t.currentStep]||$(t.currentStep)},B=()=>{d.value=f.data.map(n=>document.querySelector(`.${n.class}`)).filter(Boolean),d.value.length>0?$(0):t.isShowSvg=!1},b=async n=>{t.currentStep=0,m("update:modelValue",!1),n==="close"&&m("close"),n==="ok"&&m("ok"),await T.Utils.wait(500),a.value&&(a.value.style.top=p.value.top,a.value.style.left=p.value.left)},k=()=>{t.currentStep===S.value-1?b("ok"):(t.currentStep++,$(t.currentStep))},V=()=>{t.currentStep=Math.max(0,t.currentStep-1),$(t.currentStep)};return l.watch(()=>f.modelValue,n=>{n&&B()}),l.onMounted(()=>{f.modelValue&&B(),window.addEventListener("resize",x),window.addEventListener("scroll",x,{passive:!0})}),l.onUnmounted(()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",x)}),{state:t,stepEl:a,arrowEl:g,stepCount:S,computedPath:H,handleClose:b,handleNext:k,handlePrev:V}};exports.useTour=z;