@fox-js/navigation/dist/index.cjs.js

fox navigation

"use strict";/*!
 * @fox-js/navigation v4.0.0 Mon Sep 26 2022 12:00:20 GMT+0800 (中国标准时间)
 */const s=require("vue"),P=s.defineComponent({__name:"index",props:{routerViewName:null,transition:{type:[Object,Boolean],default:!1}},setup(t){const e=t;return(n,a)=>{const r=s.resolveComponent("fox-router-view");return s.openBlock(),s.createBlock(r,{class:"fox-card-navigator","view-class":"fox-card-navigator__item","view-active-class":"fox-card-navigator__item-active","view-inactive-class":"fox-card-navigator__item-inactive","transition-name":"fox-card-navigator__trans",transition:e.transition,multi:!0,name:e.routerViewName},null,8,["transition","name"])}}});const O=Object.freeze(Object.defineProperty({__proto__:null,default:P},Symbol.toStringTag,{value:"Module"})),D=10;function I(t,e){return t>e&&t>D?"horizontal":e>t&&e>D?"vertical":""}function L(){const t=s.ref(0),e=s.ref(0),n=s.ref(0),a=s.ref(0),r=s.ref(0),p=s.ref(0),m=s.ref(0),g=s.ref(0),f=s.ref(0),l=s.ref(0),o=s.ref(""),i=()=>o.value==="vertical",h=()=>o.value==="horizontal",d=()=>{m.value=0,g.value=0,f.value=0,l.value=0,o.value="",n.value=0};return{move:c=>{const _=c.touches[0];m.value=_.clientX-t.value,g.value=_.clientY-e.value,r.value=_.clientX,p.value=_.clientY,f.value=Math.abs(m.value),l.value=Math.abs(g.value),a.value=Date.now()-n.value,o.value||(o.value=I(f.value,l.value))},start:c=>{d(),t.value=c.touches[0].clientX,e.value=c.touches[0].clientY,n.value=Date.now()},reset:d,startX:t,startY:e,startTime:n,duration:a,moveX:r,moveY:p,deltaX:m,deltaY:g,offsetX:f,offsetY:l,direction:o,isVertical:i,isHorizontal:h}}function C(t){return t===window}const S=t=>{const e=s.unref(t);if(C(e)){const n=e.innerWidth,a=e.innerHeight;return{top:0,left:0,right:n,bottom:a,width:n,height:a}}return e&&e.getBoundingClientRect?e.getBoundingClientRect():{top:0,left:0,right:0,bottom:0,width:0,height:0}},W=15,B=300,z=200;function N(t){t.stopPropagation()}function X(t,e){(typeof t.cancelable!="boolean"||t.cancelable)&&t.preventDefault(),e&&N(t)}function j(t,e){return t=Math.abs(t/e)/.003*(t<0?-1:1),t}function T(t,e=0,n,a=z){n==="end"?t.style.transition=`transform ${a}ms cubic-bezier(0.17, 0.89, 0.45, 1)`:t.style.transition="transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1)",t.style.transform=`translate3d(${e}px, 0, 0)`}const y=new WeakMap;function k(t,e,n,a=1e3){const r={active:!0,startDistance:0,scrollDistance:0,scrollTime:0,moving:!1,transitionEndTrigger:null},p=t.previousSibling,m=L(),g=(h,d,v,u)=>{let c=d+r.startDistance;if(v==="end"){const _=S(h);let x=_.width/3;c<x?c=0:c=_.width,u&&u>0&&(r.transitionEndTrigger=()=>{r.moving=!1,n&&h.classList.remove(n)}),T(h,c,"end",u),p&&T(p,0,"",0),c>0&&typeof e=="function"&&e()}else c<0&&(c=0),T(h,c,"",0)},f=()=>{t.style.transform="",t.style.transition="",p&&(p.style.transform="",p.style.transition=""),r.transitionEndTrigger&&(r.transitionEndTrigger(),r.transitionEndTrigger=null)},l=h=>{if(m.start(h),r.moving){const d=t,{transform:v}=window.getComputedStyle(d);r.scrollDistance=+v.slice(7,v.length-1).split(", ")[5]}n&&t.classList.add(n),r.startDistance=r.scrollDistance,r.transitionEndTrigger=null,r.moving=!0},o=h=>{if(r.moving=!0,m.move(h),m.isVertical()){X(h,!0);return}g(t,m.deltaX.value,"",0)},i=()=>{const h=m.deltaX.value;if(h==0){n&&t.classList.remove(n);return}const d=m.duration.value;if(d<B&&Math.abs(h)>W){const u=j(h,d);g(t,u,"end",a)}else g(t,h,"end",a)};t.addEventListener("transitionend",f),t.addEventListener("touchstart",l),t.addEventListener("touchmove",o),t.addEventListener("touchend",i),t.addEventListener("touchcancel",i),y.set(t,{state:r,transitionend:f,touchstart:l,touchmove:o,touchend:i,touchcancel:i})}function A(t){const e=y.get(t);e&&(y.delete(t),t.addEventListener("transitionend",e.transitionend),t.addEventListener("touchstart",e.touchstart),t.addEventListener("touchmove",e.touchmove),t.addEventListener("touchend",e.touchend),t.addEventListener("touchcancel",e.touchcancel))}const U=s.defineComponent({__name:"index",props:{dragRemove:{type:Boolean,default:!0},removePage:null,routerViewName:null,viewTag:{default:"div"},transition:{type:[Object,Boolean],default:!0}},setup(t){const e=t;function n(l){return(l.params&&l.params.animationType)??"slide"}const a=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d==="pop"&&o)return;const v=o?"show":"enter",u=`fox-root-navigator__${d}-${v}-from`,c=`fox-root-navigator__${d}-${v}-active`;l.classList.add(u),l.classList.add(c)}},r=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d==="pop"&&o)return;const v=o?"show":"enter",u=`fox-root-navigator__${d}-${v}-from`,c=`fox-root-navigator__${d}-${v}-to`;l.classList.remove(u),l.classList.add(c)}},p=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d!=="pop"||!o){const v=o?"show":"enter",u=`fox-root-navigator__${d}-${v}-active`,c=`fox-root-navigator__${d}-${v}-to`;l.classList.remove(u),l.classList.remove(c)}}e.dragRemove&&!o&&i.opsType===3&&k(l,e.removePage,"fox-root-navigator__item-moving",1e3)},m=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d==="pop"&&o)return;const v=o?"hide":"leave",u=`fox-root-navigator__${d}-${v}-from`,c=`fox-root-navigator__${d}-${v}-active`;l.classList.add(u),l.classList.add(c)}},g=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d==="pop"&&o)return;const v=o?"hide":"leave",u=`fox-root-navigator__${d}-${v}-from`,c=`fox-root-navigator__${d}-${v}-to`;l.classList.remove(u),l.classList.add(c)}},f=(l,o,i,h)=>{if(i.opsType===3||o){const d=n(i);if(d!=="pop"||!o){const v=o?"hide":"leave",u=`fox-root-navigator__${d}-${v}-active`,c=`fox-root-navigator__${d}-${v}-to`;l.classList.remove(u),l.classList.remove(c)}}e.dragRemove&&!o&&A(l)};return(l,o)=>{const i=s.resolveComponent("fox-router-view");return s.openBlock(),s.createBlock(i,{class:"fox-root-navigator","view-class":"fox-root-navigator__item","before-enter":a,enter:r,"after-enter":p,"before-leave":m,leave:g,"after-leave":f,multi:!0,name:e.routerViewName,"view-tag":e.viewTag,transition:e.transition},null,8,["name","view-tag","transition"])}}});const V=Object.freeze(Object.defineProperty({__proto__:null,default:U},Symbol.toStringTag,{value:"Module"})),R={class:"fox-swiper-navigator"},Y=s.defineComponent({__name:"swiper",props:{width:null,scrollDistance:null,scrollTime:null},setup(t){const e=t,n=s.computed(()=>({transform:`translate3d(${e.scrollDistance}px, 0, 0)`,width:`${e.width}`}));return(a,r)=>(s.openBlock(),s.createElementBlock("div",R,[s.createElementVNode("div",{class:"fox-swiper-navigator__inner",style:s.normalizeStyle(s.unref(n))},[s.renderSlot(a.$slots,"default")],4)]))}});let q=0;function F(){return++q}const H=15,G=300,J=200;function K(t){t.stopPropagation()}function Q(t,e){(typeof t.cancelable!="boolean"||t.cancelable)&&t.preventDefault(),e&&K(t)}function Z(t,e){return t=Math.abs(t/e)/.003*(t<0?-1:1),t}function E(t,e=0,n,a=J){n==="end"?t.style.transition=`transform ${a}ms cubic-bezier(0.17, 0.89, 0.45, 1)`:t.style.transition="transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1)",t.style.transform=`translate3d(${e}px, 0, 0)`}class tt{width=0;columnWidth=0;max=0;min=0;el=null;swipeDuration=360;transitionEndTrigger=null;moving=!1;startDistance=0;scrollDistance=0;getStartDistance;openPage;isPageOpened;pageOpened;transitionend=null;touchstart=null;touchmove=null;touchend=null;touchcancel=null;constructor(e,n,a,r){this.getStartDistance=e,this.openPage=n,this.isPageOpened=a,this.pageOpened=r}open(){const e=this.el,n=L(),a=(r,p,m,g)=>{let f=p+this.startDistance;const l=this.columnWidth/3;if(m==="end"){if(f==0){this.moving=!1;return}Math.abs(p)>l&&(p>0?f=this.startDistance+this.columnWidth:f=this.startDistance-this.columnWidth);let o=-f;o<0?o=0:o>this.width-this.columnWidth&&(o=this.width-this.columnWidth);const i=Math.floor(o/this.columnWidth);this.isPageOpened(i)||this.openPage(i),f=-i*this.columnWidth,g&&g>0&&(this.transitionEndTrigger=()=>{this.moving=!1,this.pageOpened(i)}),E(r,f,"end",g),this.scrollDistance=f}else{if(Math.abs(p)>l){let i=0;if(p>0?i=Math.abs(this.startDistance+this.columnWidth):i=Math.abs(this.startDistance-this.columnWidth),i>=0&&i<this.width){const h=Math.floor(i/this.columnWidth);this.isPageOpened(h)||this.openPage(h)}}let o=-f;o<this.min?o=this.min:o>this.max&&(o=this.max),E(r,-o,"",0)}};this.transitionend=()=>{e.style.transition="",this.transitionEndTrigger&&(this.transitionEndTrigger(),this.transitionEndTrigger=null)},this.touchstart=r=>{this.moving||(n.start(r),this.startDistance=this.getStartDistance(),this.transitionEndTrigger=null,this.moving=!0)},this.touchmove=r=>{if(n.move(r),n.isVertical()){Q(r,!0);return}a(e,n.deltaX.value,"",0)},this.touchend=()=>{const r=n.deltaX.value;if(r==0)return;const p=n.duration.value;if(p<G&&Math.abs(r)>H){const g=Z(r,p);a(e,g,"end",this.swipeDuration)}else a(e,r,"end",this.swipeDuration)},e.addEventListener("transitionend",this.transitionend),e.addEventListener("touchstart",this.touchstart),e.addEventListener("touchmove",this.touchmove),e.addEventListener("touchend",this.touchend),e.addEventListener("touchcancel",this.touchend)}close(){const e=this.el;this.transitionend&&e.addEventListener("transitionend",this.transitionend),this.touchstart&&e.addEventListener("touchstart",this.touchstart),this.touchmove&&e.addEventListener("touchmove",this.touchmove),this.touchend&&e.addEventListener("touchend",this.touchend),this.touchcancel&&e.addEventListener("touchcancel",this.touchcancel),this.el=null}}function et(t,e,n,a){return new tt(t,e,n,a)}const nt=s.defineComponent({__name:"index",props:{activePath:null,routes:null,height:null,width:null,drag:{type:Boolean,default:!0},openPage:null,routerViewName:null,transition:{type:[Object,Boolean],default:!0},swipeDuration:{default:360},scrollTime:{default:0}},emits:["update:activePath"],setup(t,{emit:e}){const n=t,a=s.reactive({scrollDistance:0,index:-1,openedIndexList:[]}),f=et(()=>a.scrollDistance,u=>{if(a.openedIndexList.indexOf(u)===-1){a.openedIndexList.push(u);const c=n.routes[u];try{n.openPage(c,u)}catch(_){console.error(_)}}},u=>a.openedIndexList.indexOf(u)!==-1,u=>{a.index=u,a.scrollDistance=-a.index*n.width;const c=n.routes[u];e("update:activePath",c.path)});s.onMounted(()=>{const u=h();f.el=u,f.open()}),s.onUnmounted(()=>{f.close()}),s.watchEffect(()=>{const u=n.activePath;a.index=n.routes.findIndex(M=>M.path===u);const c=n.width;a.index!==-1&&(a.openedIndexList.push(a.index),a.scrollDistance=-c*a.index);const _=c*n.routes.length,x=-c/3,w=c*(n.routes.length-1)+c/3;f.columnWidth=c,f.width=_,f.min=x,f.max=w,f.swipeDuration=n.swipeDuration});const l=`fox-swiper-navigator-${F()}`,o=s.computed(()=>({width:`${n.width}px`,height:`${n.height}px`}));let i=null;function h(){return i||(i=document.querySelector(`.${l}>.fox-swiper-navigator__inner`),i)}const d=s.computed(()=>`${n.width*n.routes.length}px`),v=(u,c)=>({style:{left:`${n.routes.findIndex(x=>{const w=u.path??u.name??"";return x.path==w})*n.width}px`,width:`${n.width}px`}});return(u,c)=>{const _=s.resolveComponent("fox-router-view");return s.openBlock(),s.createBlock(_,{class:s.normalizeClass(l),style:s.normalizeStyle(s.unref(o)),"view-class":"fox-swiper-navigator__item",tag:Y,"view-tag-props":v,multi:!0,name:n.routerViewName,transition:n.transition,"scroll-distance":a.scrollDistance,"scroll-time":n.scrollTime,width:s.unref(d)},null,8,["style","name","transition","scroll-distance","scroll-time","width"])}}});const ot=Object.freeze(Object.defineProperty({__proto__:null,default:nt},Symbol.toStringTag,{value:"Module"}));let it="fox-";const st=[],$=Object.assign({"/src/components/card-navigator/index.vue":O,"/src/components/root-navigator/index.vue":V,"/src/components/swiper-navigator/index.vue":ot}),b=[];for(const t in $){let e=/src\/components\/(.*)\/index.vue/.exec(t)[1];st.indexOf(e)===-1&&b.push({name:e,component:$[t].default})}const at={install(t){b.forEach(e=>{t.component(`${it}${e.name}`,e.component)})}};module.exports=at;