vue-amazing-ui/lib/carousel/Carousel.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../utils/index.cjs"),ie=require("@vueuse/core"),H=require("../spin/index.cjs"),ne=["onClick"],re=["href","target"],se=["onLoad","src","alt"],fe=["href","target"],ce=["src","alt"],ve=["onClick","onMouseenter"],de=e.defineComponent({__name:"Carousel",props:{images:{default:()=>[]},width:{default:"100%"},height:{default:"100vh"},autoplay:{type:Boolean,default:!1},pauseOnMouseEnter:{type:Boolean,default:!1},effect:{default:"slide"},interval:{default:3e3},showArrow:{type:Boolean,default:!0},arrowColor:{default:"#FFF"},arrowSize:{default:36},dots:{type:Boolean,default:!0},dotSize:{default:10},dotColor:{default:"rgba(255, 255, 255, 0.3)"},dotActiveColor:{default:void 0},dotStyle:{default:()=>({})},dotActiveStyle:{default:()=>({})},dotPosition:{default:"bottom"},dotsTrigger:{default:"click"},spinProps:{default:()=>({})},fadeDuration:{default:500},fadeFunction:{default:"cubic-bezier(0.4, 0, 0.2, 1)"},slideDuration:{default:800},slideFunction:{default:()=>[.65,0,.35,1]}},emits:["change","click"],setup(W,{expose:j,emit:U}){const l=W,r=e.ref(0),i=e.ref(),$=e.ref(!1),s=e.ref(!1),v=e.ref(),b=e.ref(),h=e.ref(),a=e.ref(1),w=e.ref(),k=e.ref(),m=e.ref(Array(l.images.length).fill(!1)),{colorPalettes:X}=f.useInject("Carousel"),N=U,Y=e.computed(()=>typeof l.width=="number"?`${l.width}px`:l.width),G=e.computed(()=>typeof l.height=="number"?`${l.height}px`:l.height),n=e.computed(()=>l.images.length),y=e.computed(()=>["left","right"].includes(l.dotPosition)),c=e.computed(()=>y.value?k.value:w.value),J=e.computed(()=>l.dotActiveColor===void 0?X.value[5]:l.dotActiveColor),Q=e.computed(()=>l.effect==="slide"?{transform:(y.value?"translateY":"translateX")+`(${-r.value}px)`}:{});e.watch(()=>[y.value,l.effect,l.images,l.autoplay,l.interval,l.fadeDuration,l.fadeFunction,m.value[0]],()=>{L()},{deep:!0,flush:"post"}),e.watch(a,t=>{N("change",t)}),f.useEventListener(document,"visibilitychange",x),f.useResizeObserver(h,()=>{Z(),L()});function L(){i.value&&f.cancelRaf(i.value),v.value&&cancelAnimationFrame(v.value),s.value=!1,l.effect==="slide"&&(r.value=(a.value-1)*c.value),E()}function P(t){m.value[t]=!0}function Z(){w.value=h.value.offsetWidth,k.value=h.value.offsetHeight}function z(t){n.value>1&&((t.key==="ArrowLeft"||t.key==="ArrowUp")&&A(),(t.key==="ArrowRight"||t.key==="ArrowDown")&&F())}function x(){document.visibilityState==="hidden"?(i.value&&f.cancelRaf(i.value),r.value=g.value+S.value,s.value=!1):E()}function E(){l.autoplay&&n.value>1&&m.value[0]&&($.value=!1,C())}function _(){i.value&&f.cancelRaf(i.value),$.value=!0}function C(){$.value||(i.value&&f.cancelRaf(i.value),i.value=f.rafTimeout(()=>{if(s.value=!0,l.effect==="slide"){const t=r.value%(n.value*c.value)+c.value;M(t),a.value=a.value%n.value+1}else p("left")},l.interval))}function A(){if(!s.value)if(s.value=!0,i.value&&f.cancelRaf(i.value),l.effect==="slide"){const t=(a.value+n.value-2)%n.value*c.value;I(t),a.value=a.value-1>0?a.value-1:n.value}else p("right")}function F(){if(!s.value)if(s.value=!0,i.value&&f.cancelRaf(i.value),l.effect==="slide"){const t=a.value*c.value;M(t),a.value=a.value%n.value+1}else p("left")}const B=e.ref(0),g=e.ref(0),S=e.ref(0),V=ie.useTransition(B,{duration:l.slideDuration,transition:l.slideFunction});function p(t,o){t==="left"?a.value=a.value%n.value+1:t==="right"?a.value=a.value-1>0?a.value-1:n.value:a.value=o,f.rafTimeout(()=>{s.value=!1,l.autoplay&&C()},l.fadeDuration)}function q(t){b.value=t,B.value=B.value?0:1,g.value=r.value,S.value=t-g.value}function D(){B.value?r.value=g.value+S.value*V.value:r.value=g.value+S.value*(1-V.value)}function T(){r.value>=b.value?(s.value=!1,l.autoplay&&C()):(D(),v.value=requestAnimationFrame(T))}function M(t){r.value===n.value*c.value&&(r.value=0),q(t),v.value=requestAnimationFrame(T)}function O(){r.value<=b.value?(s.value=!1,l.autoplay&&C()):(D(),v.value=requestAnimationFrame(O))}function I(t){r.value===0&&(r.value=n.value*c.value),q(t),v.value=requestAnimationFrame(O)}function R(t){if(!s.value&&a.value!==t){if(s.value=!0,i.value&&f.cancelRaf(i.value),t<a.value)if(l.effect==="slide"){const o=(t-1)*c.value;I(o),a.value=t}else p("switch",t);if(t>a.value)if(l.effect==="slide"){const o=(t-1)*c.value;M(o),a.value=t}else p("switch",t)}}function ee(t){R(t)}function K(t){N("click",t)}function te(t){t>=1&&t<=n.value&&R(t)}function le(){A()}function ae(){F()}function oe(){return a.value}return j({to:te,prev:le,next:ae,getCurrentIndex:oe}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"carouselRef",ref:h,class:e.normalizeClass(["carousel-wrap",{"carousel-vertical":y.value,"carousel-fade":t.effect==="fade"}]),style:e.normalizeStyle(`
      --carousel-width: ${Y.value};
      --carousel-height: ${G.value};
      --carousel-arrow-color: ${t.arrowColor};
      --carousel-dot-size: ${t.dotSize}px;
      --carousel-dot-color: ${t.dotColor};
      --carousel-fade-duration: ${l.fadeDuration}ms;
      --carousel-fade-function: ${l.fadeFunction};
    `),onMouseenter:o[2]||(o[2]=u=>t.autoplay&&t.pauseOnMouseEnter?_():()=>!1),onMouseleave:o[3]||(o[3]=u=>t.autoplay&&t.pauseOnMouseEnter?E():()=>!1)},[e.createElementVNode("div",{class:"carousel-flex-wrap",style:e.normalizeStyle(Q.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.images,(u,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["image-wrap",{"image-fade-active":t.effect==="fade"&&a.value===d+1}]),onClick:ue=>K(u),key:d},[e.createVNode(e.unref(H.default),e.mergeProps({spinning:!m.value[d],indicator:"dynamic-circle"},{ref_for:!0},t.spinProps),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":u.link}]),href:u.link,target:u.target?u.target:"_blank"},[(e.openBlock(),e.createElementBlock("img",{onLoad:ue=>P(d),src:u.src,key:u.src,alt:u.name,class:"image-item",style:e.normalizeStyle(`width: ${w.value}px; height: ${k.value}px;`)},null,44,se))],10,re)]),_:2},1040,["spinning"])],10,ne))),128)),n.value&&t.effect==="slide"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"image-wrap",onClick:o[1]||(o[1]=u=>K(t.images[0]))},[e.createVNode(e.unref(H.default),e.mergeProps({spinning:!m.value[0],indicator:"dynamic-circle"},t.spinProps),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":t.images[0].link}]),href:t.images[0].link,target:t.images[0].target?t.images[0].target:"_blank"},[(e.openBlock(),e.createElementBlock("img",{onLoad:o[0]||(o[0]=u=>P(0)),src:t.images[0].src,key:t.images[0].src,alt:t.images[0].name,class:"image-item",style:e.normalizeStyle(`width: ${w.value}px; height: ${k.value}px;`)},null,44,ce))],10,fe)]),_:1},16,["spinning"])])):e.createCommentVNode("",!0)],4),t.showArrow?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[(e.openBlock(),e.createElementBlock("svg",{tabindex:"0",class:"arrow-left",style:e.normalizeStyle(`width: ${t.arrowSize}px; height: ${t.arrowSize}px;`),onClick:A,onKeydown:e.withModifiers(z,["prevent"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},[...o[4]||(o[4]=[e.createElementVNode("path",{d:"M10.26 3.2a.75.75 0 0 1 .04 1.06L6.773 8l3.527 3.74a.75.75 0 1 1-1.1 1.02l-4-4.25a.75.75 0 0 1 0-1.02l4-4.25a.75.75 0 0 1 1.06-.04z"},null,-1)])],36)),(e.openBlock(),e.createElementBlock("svg",{tabindex:"0",class:"arrow-right",style:e.normalizeStyle(`width: ${t.arrowSize}px; height: ${t.arrowSize}px;`),onClick:F,onKeydown:e.withModifiers(z,["prevent"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},[...o[5]||(o[5]=[e.createElementVNode("path",{d:"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04z"},null,-1)])],36))],64)):e.createCommentVNode("",!0),t.dots?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["carousel-switch",`switch-${t.dotPosition}`])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,u=>(e.openBlock(),e.createElementBlock("div",{tabindex:"0",class:"dot-item",style:e.normalizeStyle([t.dotStyle,a.value===u?{backgroundColor:J.value,...t.dotActiveStyle}:{}]),key:u,onClick:d=>t.dotsTrigger==="click"?R(u):()=>!1,onMouseenter:d=>t.dotsTrigger==="hover"?ee(u):()=>!1,onKeydown:e.withModifiers(z,["prevent"])},null,44,ve))),128))],2)):e.createCommentVNode("",!0)],38))}});exports.default=de;