vue3-carrousel/dist/vue3-carrousel.umd.cjs

Ce composant est un carousel flexible et personnalisable. Il permet de créer un slider avec des options telles que le défilement automatique, l'effet de boucle, le contrôle via les touches du clavier, et bien plus encore.

(function(E,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(E=typeof globalThis<"u"?globalThis:E||self,e(E.VueCarrousel={},E.Vue))})(this,function(E,e){"use strict";/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */const j=n=>n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */var A={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */const D=({size:n,strokeWidth:o=2,absoluteStrokeWidth:t,color:u,iconNode:d,name:l,class:p,...g},{slots:y})=>e.h("svg",{...A,width:n||A.width,height:n||A.height,stroke:u||A.stroke,"stroke-width":t?Number(o)*24/Number(n):o,class:["lucide",`lucide-${j(l??"icon")}`],...g},[...d.map(b=>e.h(...b)),...y.default?[y.default()]:[]]);/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */const I=(n,o)=>(t,{slots:u})=>e.h(D,{...t,iconNode:o,name:n},u);/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */const R=I("ChevronLeftIcon",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]);/**
 * @license lucide-vue-next v0.453.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */const X=I("ChevronRightIcon",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]);async function L(n){return new Promise(o=>setTimeout(o,n))}function M(n){return e.getCurrentScope()?(e.onScopeDispose(n),!0):!1}function _(n){return typeof n=="function"?n():e.unref(n)}const z=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const F=Object.prototype.toString,K=n=>F.call(n)==="[object Object]",V=()=>{};function H(n){return e.getCurrentInstance()}function W(...n){if(n.length!==1)return e.toRef(...n);const o=n[0];return typeof o=="function"?e.readonly(e.customRef(()=>({get:o,set:V}))):e.ref(o)}function Y(n,o=!0,t){H()?e.onMounted(n,t):o?n():e.nextTick(n)}const q=z?window:void 0;function G(n){var o;const t=_(n);return(o=t==null?void 0:t.$el)!=null?o:t}function T(...n){let o,t,u,d;if(typeof n[0]=="string"||Array.isArray(n[0])?([t,u,d]=n,o=q):[o,t,u,d]=n,!o)return V;Array.isArray(t)||(t=[t]),Array.isArray(u)||(u=[u]);const l=[],p=()=>{l.forEach(a=>a()),l.length=0},g=(a,v,h,w)=>(a.addEventListener(v,h,w),()=>a.removeEventListener(v,h,w)),y=e.watch(()=>[G(o),_(d)],([a,v])=>{if(p(),!a)return;const h=K(v)?{...v}:v;l.push(...t.flatMap(w=>u.map(x=>g(a,w,x,h))))},{immediate:!0,flush:"post"}),b=()=>{y(),p()};return M(b),b}function U(n,o={}){const t=W(n),{threshold:u=50,onSwipe:d,onSwipeEnd:l,onSwipeStart:p,disableTextSelect:g=!1}=o,y=e.reactive({x:0,y:0}),b=(s,m)=>{y.x=s,y.y=m},a=e.reactive({x:0,y:0}),v=(s,m)=>{a.x=s,a.y=m},h=e.computed(()=>y.x-a.x),w=e.computed(()=>y.y-a.y),{max:x,abs:r}=Math,c=e.computed(()=>x(r(h.value),r(w.value))>=u),i=e.ref(!1),f=e.ref(!1),C=e.computed(()=>c.value?r(h.value)>r(w.value)?h.value>0?"left":"right":w.value>0?"up":"down":"none"),$=s=>{var m,k,S;const B=s.buttons===0,P=s.buttons===1;return(S=(k=(m=o.pointerTypes)==null?void 0:m.includes(s.pointerType))!=null?k:B||P)!=null?S:!0},te=[T(n,"pointerdown",s=>{if(!$(s))return;f.value=!0;const m=s.target;m==null||m.setPointerCapture(s.pointerId);const{clientX:k,clientY:S}=s;b(k,S),v(k,S),p==null||p(s)}),T(n,"pointermove",s=>{if(!$(s)||!f.value)return;const{clientX:m,clientY:k}=s;v(m,k),!i.value&&c.value&&(i.value=!0),i.value&&(d==null||d(s))}),T(n,"pointerup",s=>{$(s)&&(i.value&&(l==null||l(s,C.value)),f.value=!1,i.value=!1)})];Y(()=>{var s,m,k,S,B,P,N,O;(m=(s=t.value)==null?void 0:s.style)==null||m.setProperty("touch-action","none"),g&&((S=(k=t.value)==null?void 0:k.style)==null||S.setProperty("-webkit-user-select","none"),(P=(B=t.value)==null?void 0:B.style)==null||P.setProperty("-ms-user-select","none"),(O=(N=t.value)==null?void 0:N.style)==null||O.setProperty("user-select","none"))});const ne=()=>te.forEach(s=>s());return{isSwiping:e.readonly(i),direction:e.readonly(C),posStart:e.readonly(y),posEnd:e.readonly(a),distanceX:h,distanceY:w,stop:ne}}const Z={class:"p-11 text-center select-none"},J={class:"w-full flex justify-center gap-2 pb-4"},Q=["onClick"],ee=e.defineComponent({__name:"Carousel",props:{modelValue:{type:Number,default:0},slides:{type:Array,default:()=>[]},wrapAround:{type:Boolean,default:!1},transitionDuration:{type:Number,default:300},autoPlay:{type:Boolean,default:!1},autoPlayInterval:{type:Number,default:5e3},pauseAutoPlayOnHover:{type:Boolean,default:!0},arrowKeys:{type:Boolean,default:!0},touchDrag:{type:Boolean,default:!0}},setup(n,{expose:o}){const t=n,u=e.useTemplateRef("carousel"),d=e.useTemplateRef("slides"),l=e.ref(0),p=e.ref(void 0),g=e.computed(()=>t.slides.length<2?{0:t.slides[0]}:t.wrapAround?{0:t.slides[t.slides.length-1],...t.slides.reduce((r,c,i)=>(r[i+1]=c,r),{}),[t.slides.length+1]:t.slides[0]}:{...t.slides.reduce((r,c,i)=>(r[i]=c,r),{})});e.onMounted(()=>{if(a(t.modelValue,!1),t.autoPlay){const r=()=>{const c=l.value===t.slides.length-1;if(!t.wrapAround&&c){clearInterval(p.value);return}v()};p.value=setInterval(r,t.autoPlayInterval),t.pauseAutoPlayOnHover&&u.value&&(u.value.addEventListener("mouseenter",()=>{clearInterval(p.value)}),u.value.addEventListener("mouseleave",()=>{p.value=setInterval(r,t.autoPlayInterval)}))}}),e.onUnmounted(()=>{t.autoPlay&&(clearInterval(p.value),t.pauseAutoPlayOnHover&&u.value&&(u.value.removeEventListener("mouseenter",()=>{clearInterval(p.value)}),u.value.removeEventListener("mouseleave",()=>{clearInterval(p.value)})))});const{direction:y,distanceX:b}=U(d,{onSwipe(){if(d.value&&t.touchDrag&&t.wrapAround){const r=100/Object.keys(g.value).length,i=t.slides.length>1||t.wrapAround?l.value+1:l.value,f=`translateX(-${r*i}%)`;if(d.value.style.transition="none",y.value==="right"){const C=Math.sign(b.value)*b.value;d.value.style.transform=`translateX(${C}px) ${f}`}else d.value.style.transform=`translateX(-${b.value}px) ${f}`}},onSwipeEnd(){const r=y.value==="right",c=y.value==="left",i=l.value===0&&r,f=l.value===t.slides.length-1&&c;(i||f)&&!t.wrapAround||(c?v():r&&h())}});function a(r,c=!0){if(d.value){l.value=r;const i=100/Object.keys(g.value).length,f=t.slides.length<2||!t.wrapAround?r:r+1;c?d.value.style.transition=`transform ${t.transitionDuration}ms`:d.value.style.transition="none",d.value.style.transform=`translateX(-${i*f}%)`}}function v(){if(l.value===t.slides.length-1){w();return}l.value++,l.value>=t.slides.length&&(l.value=0),a(l.value)}function h(){if(l.value===0){x();return}l.value--,l.value<0&&(l.value=t.slides.length-1),a(l.value)}async function w(){l.value++,a(l.value),l.value=0,await L(t.transitionDuration),a(l.value,!1)}async function x(){l.value--,a(l.value),l.value=t.slides.length-1,await L(t.transitionDuration),a(l.value,!1)}return o({next:v,prev:h,slideTo:a,currentSlide:l}),(r,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"carousel",ref:u,class:"relative w-full max-w-[800px] mx-auto overflow-hidden"},[e.createElementVNode("div",{ref:"slides",class:"flex items-center overflow-x-auto select-none",style:e.normalizeStyle({width:`${100*Object.keys(g.value).length}%`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(i,f)=>(e.openBlock(),e.createElementBlock("div",{key:f,style:e.normalizeStyle({width:`${100/Object.keys(g.value).length}%`})},[e.renderSlot(r.$slots,"slide",{s:i},()=>[e.createElementVNode("div",Z,[e.createElementVNode("p",null,e.toDisplayString(i),1)])])],4))),128))],4),e.createElementVNode("div",null,[t.arrowKeys&&(t.wrapAround||l.value>0)?(e.openBlock(),e.createElementBlock("button",{key:0,class:"absolute top-1/2 left-3 -translate-y-1/2 cursor-pointer bg-transparent border-none outline-none",onClick:c[0]||(c[0]=i=>h())},[e.createVNode(e.unref(R),{size:32})])):e.createCommentVNode("",!0),t.arrowKeys&&(t.wrapAround||l.value<t.slides.length-1)?(e.openBlock(),e.createElementBlock("button",{key:1,class:"absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer bg-transparent border-none outline-none",onClick:c[1]||(c[1]=i=>v())},[e.createVNode(e.unref(X),{size:32})])):e.createCommentVNode("",!0)]),e.renderSlot(r.$slots,"addons",{slides:n.slides},()=>[e.createElementVNode("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.slides,(i,f)=>(e.openBlock(),e.createElementBlock("span",{key:f,class:e.normalizeClass(["w-2 h-2 mx-1 rounded-full cursor-pointer",[f===l.value?"bg-gray-100 border border-neutral-700 dark:bg-neutral-700 dark:border-gray-100":"bg-neutral-700 dark:bg-gray-100"]]),onClick:C=>a(f,!0)},null,10,Q))),128))])])],512))}});E.Carousel=ee,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});