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