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

fox navigation

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