123456 |
- /**
- * Vue 3 Carousel 0.8.1
- * (c) 2024
- * @license MIT
- */
- import{Fragment as e,defineComponent as t,inject as l,reactive as a,ref as n,h as i,computed as o,provide as r,onMounted as u,nextTick as s,onUnmounted as d,watch as c,cloneVNode as v}from"vue";const p=["center","start","end","center-even","center-odd"],m=["viewport","carousel"],g=["ltr","left-to-right","rtl","right-to-left","ttb","top-to-bottom","btt","bottom-to-top"],f={enabled:!0,itemsToShow:1,itemsToScroll:1,modelValue:0,transition:300,autoplay:0,gap:0,height:"auto",wrapAround:!1,pauseAutoplayOnHover:!1,mouseDrag:!0,touchDrag:!0,snapAlign:p[0],dir:g[0],breakpointMode:m[0],breakpoints:void 0,i18n:{ariaNextSlide:"Navigate to next slide",ariaPreviousSlide:"Navigate to previous slide",ariaNavigateToSlide:"Navigate to slide {slideNumber}",ariaGallery:"Gallery",itemXofY:"Item {currentSlide} of {slidesCount}",iconArrowUp:"Arrow pointing upwards",iconArrowDown:"Arrow pointing downwards",iconArrowRight:"Arrow pointing to the right",iconArrowLeft:"Arrow pointing to the left"}},h={enabled:{default:f.enabled,type:Boolean},itemsToShow:{default:f.itemsToShow,type:Number},itemsToScroll:{default:f.itemsToScroll,type:Number},wrapAround:{default:f.wrapAround,type:Boolean},gap:{default:f.gap,type:Number},height:{default:f.height,type:[Number,String]},snapAlign:{default:f.snapAlign,validator:e=>p.includes(e)},transition:{default:f.transition,type:Number},breakpointMode:{default:f.breakpointMode,validator:e=>m.includes(e)},breakpoints:{default:f.breakpoints,type:Object},autoplay:{default:f.autoplay,type:Number},pauseAutoplayOnHover:{default:f.pauseAutoplayOnHover,type:Boolean},modelValue:{default:void 0,type:Number},mouseDrag:{default:f.mouseDrag,type:Boolean},touchDrag:{default:f.touchDrag,type:Boolean},dir:{default:f.dir,validator:e=>g.includes(e)},i18n:{default:f.i18n,type:Object}};function b({val:e,max:t,min:l}){return t<l?e:Math.min(Math.max(e,l),t)}function w(t){return t?t.reduce(((t,l)=>{var a;return l.type===e?[...t,...w(l.children)]:"CarouselSlide"===(null===(a=l.type)||void 0===a?void 0:a.name)?[...t,l]:t}),[]):[]}function S({val:e,max:t,min:l=0}){const a=t-l+1;return((e-l)%a+a)%a+l}function x(e="",t={}){return Object.entries(t).reduce(((e,[t,l])=>e.replace(`{${t}}`,String(l))),e)}var y,A=t({name:"ARIA",setup(){const e=l("config",a(Object.assign({},f))),t=l("currentSlide",n(0)),o=l("slidesCount",n(0));return()=>i("div",{class:["carousel__liveregion","carousel__sr-only"],"aria-live":"polite","aria-atomic":"true"},x(e.i18n.itemXofY,{currentSlide:t.value+1,slidesCount:o.value}))}}),_=t({name:"Carousel",props:h,emits:["init","drag","slide-start","loop","update:modelValue","slide-end","before-init"],setup(e,{slots:t,emit:l,expose:p}){var m;const g=n(null),h=n(null),x=n([]),y=n(0),_=n(0),T=o((()=>Object.assign(Object.assign(Object.assign({},f),e),{i18n:Object.assign(Object.assign({},f.i18n),e.i18n),breakpoints:void 0}))),C=a(Object.assign({},T.value)),M=n(null!==(m=e.modelValue)&&void 0!==m?m:0),N=n(0),O=n(0),k=n(0),L=n(0);let j=null,D=null,z=null;const E=o((()=>y.value+C.gap)),I=o((()=>{const e=C.dir||"lrt";return{"left-to-right":"ltr","right-to-left":"rtl","top-to-bottom":"ttb","bottom-to-top":"btt"}[e]||e})),$=o((()=>["ttb","btt"].includes(I.value)));function R(){var t;const l=("carousel"===C.breakpointMode?null===(t=g.value)||void 0===t?void 0:t.getBoundingClientRect().width:window.innerWidth)||0,a=Object.keys(e.breakpoints||{}).map((e=>Number(e))).sort(((e,t)=>+t-+e));let n=Object.assign({},T.value);a.some((t=>{var a;return l>=t&&(n=Object.assign(Object.assign({},n),null===(a=e.breakpoints)||void 0===a?void 0:a[t]),!0)})),Object.assign(C,n)}r("config",C),r("slidesCount",_),r("currentSlide",M),r("maxSlide",k),r("minSlide",L),r("slideSize",y),r("isVertical",$),r("normalizeDir",I);const B=function(e,t){let l;return function(...a){l&&clearTimeout(l),l=setTimeout((()=>{e(...a),l=null}),t)}}((()=>{R(),X(),V()}),16);function V(){if(!h.value)return;const e=h.value.getBoundingClientRect(),t=(C.itemsToShow-1)*C.gap;$.value?y.value=(e.height-t)/C.itemsToShow:y.value=(e.width-t)/C.itemsToShow}function X(){_.value<=0||(O.value=Math.ceil((_.value-1)/2),k.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;if(n)return Math.max(t-1,0);const o=null!==(l={start:Math.ceil(t-i),end:Math.ceil(t-1),center:t-Math.ceil((i-.5)/2),"center-odd":t-Math.ceil((i-.5)/2),"center-even":t-Math.ceil(i/2)}[a])&&void 0!==l?l:0;return Math.max(o,0)}({config:C,slidesCount:_.value}),L.value=function({config:e,slidesCount:t}){var l;const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e;return n||i>t?0:null!==(l={start:0,end:Math.floor(i-1),center:Math.floor((i-1)/2),"center-odd":Math.floor((i-1)/2),"center-even":Math.floor((i-2)/2)}[a])&&void 0!==l?l:0}({config:C,slidesCount:_.value}),C.wrapAround||(M.value=b({val:M.value,max:k.value,min:L.value})))}u((()=>{s((()=>V())),setTimeout((()=>V()),1e3),R(),Q(),window.addEventListener("resize",B,{passive:!0}),z=new ResizeObserver(B),g.value&&z.observe(g.value),l("init")})),d((()=>{D&&clearTimeout(D),j&&clearInterval(j),z&&g.value&&(z.unobserve(g.value),z=null),window.removeEventListener("resize",B,{passive:!0})}));let U=!1;const Y={x:0,y:0},P=a({x:0,y:0}),H=n(!1),G=n(!1),q=()=>{H.value=!0},F=()=>{H.value=!1};function W(e){const t=e.target.tagName;if(["INPUT","TEXTAREA","SELECT"].includes(t)||ee.value)return;if(U="touchstart"===e.type,!U&&(e.preventDefault(),0!==e.button))return;Y.x=U?e.touches[0].clientX:e.clientX,Y.y=U?e.touches[0].clientY:e.clientY;const l=U?"touchmove":"mousemove",a=U?"touchend":"mouseup";document.addEventListener(l,J,{passive:!1}),document.addEventListener(a,K,{passive:!0})}const J=function(e){let t=!1;return function(...l){t||(t=!0,requestAnimationFrame((()=>{e.apply(this,l),t=!1})))}}((e=>{G.value=!0;const t=U?e.touches[0].clientX:e.clientX,a=U?e.touches[0].clientY:e.clientY,n=t-Y.x,i=a-Y.y;P.x=n,P.y=i,l("drag",{deltaX:n,deltaY:i})}));function K(){const e=$.value?"y":"x",t=["rtl","btt"].includes(I.value)?-1:1,l=.4*Math.sign(P[e]),a=Math.round(P[e]/E.value+l)*t;if(a&&!U){const e=t=>{t.preventDefault(),window.removeEventListener("click",e)};window.addEventListener("click",e)}te(M.value-a),P.x=0,P.y=0,G.value=!1;const n=U?"touchmove":"mousemove",i=U?"touchend":"mouseup";document.removeEventListener(n,J),document.removeEventListener(i,K)}function Q(){!C.autoplay||C.autoplay<=0||(j=setInterval((()=>{C.pauseAutoplayOnHover&&H.value||le()}),C.autoplay))}function Z(){j&&(clearInterval(j),j=null),Q()}const ee=n(!1);function te(e){const t=C.wrapAround?e:b({val:e,max:k.value,min:L.value});M.value===t||ee.value||(l("slide-start",{slidingToIndex:e,currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!0,N.value=M.value,M.value=t,D=setTimeout((()=>{if(C.wrapAround){const a=S({val:t,max:k.value,min:0});a!==M.value&&(M.value=a,l("loop",{currentSlideIndex:M.value,slidingToIndex:e}))}l("update:modelValue",M.value),l("slide-end",{currentSlideIndex:M.value,prevSlideIndex:N.value,slidesCount:_.value}),ee.value=!1,Z()}),C.transition))}function le(){te(M.value+C.itemsToScroll)}function ae(){te(M.value-C.itemsToScroll)}const ne={slideTo:te,next:le,prev:ae};function ie(){R(),X(),V(),Z()}r("nav",ne),r("isSliding",ee),c((()=>Object.assign({},e)),ie,{deep:!0}),c((()=>e.modelValue),(e=>{e!==M.value&&te(Number(e))})),c(_,X),l("before-init");const oe={config:C,slidesCount:_,slideSize:y,currentSlide:M,maxSlide:k,minSlide:L,middleSlide:O};p({updateBreakpointsConfig:R,updateSlidesData:X,updateSlideSize:V,restartCarousel:ie,slideTo:te,next:le,prev:ae,nav:ne,data:oe});const re=o((()=>{const e=function({config:e,currentSlide:t,slidesCount:l}){const{snapAlign:a="N/A",wrapAround:n,itemsToShow:i=1}=e,o=((e,t)=>{var l;return null!==(l={start:0,center:(t-1)/2,"center-odd":(t-1)/2,"center-even":(t-2)/2,end:t-1}[e])&&void 0!==l?l:0})(a,i);return n?t-o:b({val:t-o,max:l-i,min:0})}({config:C,currentSlide:M.value,slidesCount:_.value}),t=C.wrapAround?_.value:0,l=["rtl","btt"].includes(I.value)?-1:1,a=(e+t)*E.value*l,n=$.value?P.y:P.x;return`translate${$.value?"Y":"X"}(${n-a}px)`})),ue=t.default||t.slides,se=t.addons,de=a(oe);return()=>{if(!C.enabled)return i("section",{ref:g,class:["carousel","is-disabled"]},null==ue?void 0:ue());const e=w(null==ue?void 0:ue(de)),t=(null==se?void 0:se(de))||[];e.forEach(((e,t)=>{e.props?e.props.index=t:e.props={index:t}}));let l=e;if(C.wrapAround){const t=e.map(((t,l)=>v(t,{index:-e.length+l,isClone:!0,key:`clone-before-${l}`}))),a=e.map(((t,l)=>v(t,{index:e.length+l,isClone:!0,key:`clone-after-${l}`})));l=[...t,...e,...a]}x.value=e,_.value=Math.max(e.length,1);const a=i("ol",{class:"carousel__track",style:{transform:re.value,transition:`${ee.value?C.transition:0}ms`,gap:`${C.gap}px`},onMousedownCapture:C.mouseDrag?W:null,onTouchstartPassiveCapture:C.touchDrag?W:null},l),n=i("div",{class:"carousel__viewport",ref:h},a);return i("section",{ref:g,class:["carousel",`is-${I.value}`,{"is-vertical":$.value,"is-sliding":ee.value,"is-dragging":G.value,"is-hover":H.value}],style:{"--vc-trk-height":`${"number"==typeof C.height?`${C.height}px`:C.height}`},dir:I.value,"aria-label":C.i18n.ariaGallery,tabindex:"0",onMouseenter:q,onMouseleave:F},[n,t,i(A)])}}});!function(e){e.arrowUp="arrowUp",e.arrowDown="arrowDown",e.arrowRight="arrowRight",e.arrowLeft="arrowLeft"}(y||(y={}));const T={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"};const C=e=>{const t=l("config",a(Object.assign({},f))),n=String(e.name),o=`icon${n.charAt(0).toUpperCase()+n.slice(1)}`;if(!n||"string"!=typeof n||!(n in y))return;const r=i("path",{d:T[n]}),u=t.i18n[o]||e.title||n,s=i("title",u);return i("svg",{class:"carousel__icon",viewBox:"0 0 24 24",role:"img","aria-label":u},[s,r])};C.props={name:String,title:String};const M=(e,{slots:t,attrs:o})=>{const{next:r,prev:u}=t||{},s=l("config",a(Object.assign({},f))),d=l("maxSlide",n(1)),c=l("minSlide",n(1)),v=l("normalizeDir",n("ltr")),p=l("currentSlide",n(1)),m=l("nav",{}),{wrapAround:g,i18n:h}=s;return[i("button",{type:"button",class:["carousel__prev",!g&&p.value<=c.value&&"carousel__prev--disabled",null==o?void 0:o.class],"aria-label":h.ariaPreviousSlide,title:h.ariaPreviousSlide,onClick:m.prev},(null==u?void 0:u())||i(C,{name:{ltr:"arrowLeft",rtl:"arrowRight",ttb:"arrowUp",btt:"arrowDown"}[v.value]})),i("button",{type:"button",class:["carousel__next",!g&&p.value>=d.value&&"carousel__next--disabled",null==o?void 0:o.class],"aria-label":h.ariaNextSlide,title:h.ariaNextSlide,onClick:m.next},(null==r?void 0:r())||i(C,{name:{ltr:"arrowRight",rtl:"arrowLeft",ttb:"arrowDown",btt:"arrowUp"}[v.value]}))]},N=()=>{const e=l("config",a(Object.assign({},f))),t=l("maxSlide",n(1)),o=l("minSlide",n(1)),r=l("currentSlide",n(1)),u=l("nav",{}),s=e=>S({val:r.value,max:t.value,min:0})===e,d=[];for(let l=o.value;l<t.value+1;l++){const t=x(e.i18n.ariaNavigateToSlide,{slideNumber:l+1}),a=i("button",{type:"button",class:{"carousel__pagination-button":!0,"carousel__pagination-button--active":s(l)},"aria-label":t,title:t,onClick:()=>u.slideTo(l)}),n=i("li",{class:"carousel__pagination-item",key:l},a);d.push(n)}return i("ol",{class:"carousel__pagination"},d)};var O=t({name:"CarouselSlide",props:{index:{type:Number,default:1},isClone:{type:Boolean,default:!1}},setup(e,{slots:t}){const r=l("config",a(Object.assign({},f))),u=l("currentSlide",n(0)),s=l("slidesToScroll",n(0)),d=l("isSliding",n(!1)),c=l("isVertical",n(!1)),v=l("slideSize",n(0)),p=o((()=>e.index===u.value)),m=o((()=>e.index===u.value-1)),g=o((()=>e.index===u.value+1)),h=o((()=>{const t=Math.floor(s.value),l=Math.ceil(s.value+r.itemsToShow-1);return e.index>=t&&e.index<=l})),b=o((()=>{const e=r.gap?`${v.value}px`:100/r.itemsToShow+"%";return c.value?{height:e,width:""}:{width:e,height:""}}));return()=>{var l,a;return r.enabled?i("li",{style:b.value,class:{carousel__slide:!0,"carousel__slide--clone":e.isClone,"carousel__slide--visible":h.value,"carousel__slide--active":p.value,"carousel__slide--prev":m.value,"carousel__slide--next":g.value,"carousel__slide--sliding":d.value},"aria-hidden":!h.value},null===(a=t.default)||void 0===a?void 0:a.call(t,{isActive:p.value,isClone:e.isClone,isPrev:m.value,isNext:g.value,isSliding:d.value,isVisible:h.value})):null===(l=t.default)||void 0===l?void 0:l.call(t)}}});export{_ as Carousel,C as Icon,M as Navigation,N as Pagination,O as Slide};
|