fun-tab/dist/index.full.min.cjs

A mobile touch-swappable tabs component for Vue3

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");const $=Symbol();var D=(a,u)=>{const n=a.__vccOpts||a;for(const[r,o]of u)n[r]=o;return n};const oe=e.defineComponent({name:"FunTabBar",props:{modelValue:{type:[String,Number],default:""},activeColor:{type:String,default:"#1677ff"}},emits:["update:modelValue","change"],setup(a,{emit:u}){const n=e.ref(a.modelValue);e.watch(()=>a.modelValue,o=>{n.value=o});const r=o=>{n.value=o,u("update:modelValue",o),u("change",o)};e.provide($,{activeValue:n,activeColor:e.toRef(a,"activeColor"),setActiveValue:r})}}),re={class:"fun-tab-bar"},ie={class:"fun-tab-bar-wrap"};function ve(a,u,n,r,o,s){return e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",ie,[e.renderSlot(a.$slots,"default")])])}var L=D(oe,[["render",ve],["__file","tab-bar.vue"]]);const se=e.defineComponent({name:"FunTabItem",props:{title:String,name:[String,Number],badge:[String,Number]},setup(a){const u=e.inject($),n=e.ref(),r=e.computed(()=>u?.activeValue.value===a.name?{color:u?.activeColor.value}:{}),o=()=>{u?.setActiveValue(a.name)},s={name:e.toRef(a,"name"),el:n};return e.onMounted(()=>{u.addItem?.(s)}),e.onUnmounted(()=>{u.removeItem?.(s)}),{el:n,style:r,handleClick:o}}}),ce={class:"fun-tab-item__wrap"},me={class:"fun-tab-item__label"},de={key:0,class:"fun-tab-item__badge"};function fe(a,u,n,r,o,s){return e.openBlock(),e.createElementBlock("div",{ref:"el",style:e.normalizeStyle(a.style),class:"fun-tab-item",onClick:u[0]||(u[0]=(...w)=>a.handleClick&&a.handleClick(...w))},[e.createElementVNode("div",ce,[e.renderSlot(a.$slots,"icon"),e.createElementVNode("div",me,[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.title),1)])]),a.badge?(e.openBlock(),e.createElementBlock("div",de,e.toDisplayString(a.badge),1)):e.createCommentVNode("v-if",!0)])],4)}var I=D(se,[["render",fe],["__file","tab-item.vue"]]);const R=window;function pe(){let a=0;const u=["webkit","moz"];for(let n=0;n<u.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=R[u[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=R[u[n]+"CancelAnimationFrame"]||R[u[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(n){const r=Date.now(),o=r-a,s=Math.max(0,16.7-o),w=window.setTimeout(function(){n(o)},s);return a=r+s,w}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}const be=e.defineComponent({name:"FunTabs",props:{modelValue:{type:[String,Number],default:""},lineWidth:{type:[Number,String],default:30},lineHeight:{type:Number,default:3},activeColor:{type:String,default:"#1677ff"},additionalX:{type:Number,default:50},reBoundExponent:{type:Number,default:10,validator(a){return a>0}},inertialDuration:{type:Number,default:1e3,validator(a){return a>0}},reBoundingDuration:{type:Number,default:360}},emits:["update:modelValue","change"],setup(a,{emit:u,expose:n}){let r=null;const o=[],s=e.ref(),w=e.ref(),S=e.ref(a.modelValue),N=e.ref(0),g=e.ref(0),y=e.ref(0),i=e.ref(0),c=e.ref(0),_=e.ref(!1),f=e.ref(!1),l=e.ref(0),x=e.ref(0),d=e.ref(0),p=e.ref(0),T=e.ref(0),V=e.ref(0),B=e.ref(16.7),A=e.ref(0),C=e.ref(0),E=e.ref(0),q=e.ref(.001),b=e.ref(.001),G=e.computed(()=>{const t=f.value&&!_.value?a.reBoundingDuration:0;return{transitionTimingFunction:f.value?"cubic-bezier(0.25, 0.46, 0.45, 0.94)":"cubic-bezier(0.1, 0.57, 0.1, 1)",transitionDuration:`${t}ms`,transform:`translate3d(${l.value}px, 0px, 0px)`}}),J=e.computed(()=>({transition:"all 300ms",width:`${g.value}px`,height:`${a.lineHeight}px`,transform:`translate3d(${N.value}px, 0, 0)`,backgroundColor:a.activeColor})),M=e.computed(()=>p.value<=x.value);e.watch(()=>a.modelValue,t=>{S.value=t,k()});const k=()=>{r||(r=new Promise(t=>{e.nextTick(()=>{z(),t(),r=null})}))},Q=t=>{S.value=t,u("update:modelValue",t),u("change",t)},Y=t=>{o.push(t),k()},Z=t=>{const v=o.findIndex(m=>m.name===t.name);v!==-1&&(o.splice(v,1),k())},ee={activeValue:S,activeColor:e.toRef(a,"activeColor"),addItem:Y,removeItem:Z,setActiveValue:Q};e.provide($,ee);const z=()=>{y.value=s.value.offsetWidth,i.value=w.value.offsetWidth-y.value,le(),te()},W=()=>(f.value=!1,l.value>0?(f.value=!0,l.value=0):l.value<-i.value&&(f.value=!0,l.value=-i.value),f.value),ae=()=>{M.value?l.value<=0&&l.value+i.value>0||l.value>0?l.value+=p.value-d.value:l.value+i.value<=0&&(l.value+=a.additionalX*(p.value-d.value)/(y.value+Math.abs(l.value+i.value))):l.value>=0?l.value+=a.additionalX*(p.value-d.value)/(y.value+l.value):(l.value<=0&&l.value+i.value>=0||l.value+i.value<=0)&&(l.value+=p.value-d.value),d.value=p.value},P=()=>{if(C.value=Date.now(),B.value=C.value-A.value,M.value?l.value<=-i.value?(b.value*=(a.reBoundExponent+Math.abs(l.value+i.value))/a.reBoundExponent,c.value=Math.min(c.value-b.value,0)):c.value=Math.min(c.value-b.value*B.value,0):l.value>=0?(b.value*=(a.reBoundExponent+l.value)/a.reBoundExponent,c.value=Math.max(c.value-b.value,0)):c.value=Math.max(c.value-b.value*B.value,0),l.value+=c.value*B.value/2,Math.abs(c.value)<=q.value){W();return}A.value=C.value,E.value=requestAnimationFrame(P)},j=()=>{if(!o.length)return;const t=o.find(v=>v.name.value===S.value);return t&&t.el.value},te=()=>{const t=j();if(!t)return;const v=t.offsetWidth,m=t.offsetLeft,{lineWidth:h}=a;h==="auto"?g.value=v:h<1?g.value=v*h:g.value=h,N.value=m+(v-g.value)/2},le=()=>{const t=j();if(!t)return;const v=t.offsetLeft,m=(y.value-t.offsetWidth)/2;let h=0;const K=Math.abs(l.value);v<=K+m?h=m-(v+l.value):h=-(v-K-m);let F=h+l.value;F>0&&(F=0),F<-i.value&&(F=-i.value),f.value=!0,l.value=F},O=t=>{t.stopPropagation(),cancelAnimationFrame(E.value),d.value=t.touches[0].clientX},U=t=>{i.value<=0||(t.preventDefault(),t.stopPropagation(),_.value=!0,T.value=V.value,x.value=d.value,p.value=t.touches[0].clientX,ae(),V.value=t.timeStamp)},H=t=>{if(_.value=!1,W())cancelAnimationFrame(E.value);else{let v=t.timeStamp-V.value,m=V.value-T.value;if(m=m>0?m:8,v>100)return;c.value=(d.value-x.value)/m,b.value=c.value/a.inertialDuration,A.value=Date.now(),E.value=requestAnimationFrame(P)}},ne=()=>{const t=s.value;t.addEventListener("touchstart",O,!1),t.addEventListener("touchmove",U,!1),t.addEventListener("touchend",H,!1)},ue=()=>{const t=s.value;t.removeEventListener("touchstart",O),t.removeEventListener("touchmove",U),t.removeEventListener("touchend",H)};return e.onMounted(()=>{pe(),ne(),k()}),e.onBeforeUnmount(()=>{ue()}),n({resize:z}),{viewAreaRef:s,listRef:w,activeValue:S,lineOffset:N,activeLineWidth:g,viewAreaWidth:y,offsetX:i,speed:c,touching:_,reBounding:f,translateX:l,startX:x,lastX:d,currentX:p,startMoveTime:T,endMoveTime:V,frameTime:B,frameStartTime:A,frameEndTime:C,inertiaFrame:E,zeroSpeed:q,acceleration:b,listStyle:G,activeBarStyle:J,isMoveLeft:M}}}),he={ref:"viewAreaRef",class:"fun-tabs"};function we(a,u,n,r,o,s){return e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("div",{ref:"listRef",style:e.normalizeStyle(a.listStyle),class:"fun-tabs__tab-list"},[e.renderSlot(a.$slots,"default"),e.createElementVNode("div",{style:e.normalizeStyle(a.activeBarStyle),class:"fun-tabs__active-line"},null,4)],4)],512)}var X=D(be,[["render",we],["__file","tabs.vue"]]);const ge=a=>{a.component(X.name,X),a.component(I.name,I),a.component(L.name,L)};var ye={install:ge};exports.FunTabBar=L,exports.FunTabItem=I,exports.FunTabs=X,exports.default=ye;
//# sourceMappingURL=index.full.min.cjs.map