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"],ce=["href","target"],fe=["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(a,{expose:W,emit:j}){const l=a,s=e.ref(0),n=e.ref(),z=e.ref(!1),c=e.ref(!1),d=e.ref(),E=e.ref(),k=e.ref(),o=e.ref(1),y=e.ref(),C=e.ref(),g=e.ref(Array(l.images.length).fill(!1)),{colorPalettes:U}=f.useInject("Carousel"),N=j,X=e.computed(()=>typeof l.width=="number"?`${l.width}px`:l.width),Y=e.computed(()=>typeof l.height=="number"?`${l.height}px`:l.height),r=e.computed(()=>l.images.length),B=e.computed(()=>["left","right"].includes(l.dotPosition)),v=e.computed(()=>B.value?C.value:y.value),G=e.computed(()=>l.dotActiveColor===void 0?U.value[5]:l.dotActiveColor),J=e.computed(()=>l.effect==="slide"?{transform:(B.value?"translateY":"translateX")+`(${-s.value}px)`}:{});e.watch(()=>[B.value,l.effect,l.images,l.autoplay,l.interval,l.fadeDuration,l.fadeFunction,g.value[0]],()=>{L()},{deep:!0,flush:"post"}),e.watch(o,t=>{N("change",t)}),f.useEventListener(document,"visibilitychange",Z),f.useResizeObserver(k,()=>{Q(),L()});function L(){n.value&&f.cancelRaf(n.value),d.value&&cancelAnimationFrame(d.value),c.value=!1,l.effect==="slide"&&(s.value=(o.value-1)*v.value),p()}function P(t){g.value[t]=!0}function Q(){y.value=k.value.offsetWidth,C.value=k.value.offsetHeight}function x(t){r.value>1&&((t.key==="ArrowLeft"||t.key==="ArrowUp")&&A(),(t.key==="ArrowRight"||t.key==="ArrowDown")&&F())}function Z(){document.visibilityState==="hidden"?(n.value&&f.cancelRaf(n.value),s.value=h.value+b.value,c.value=!1):p()}function p(){l.autoplay&&r.value>1&&g.value[0]&&(z.value=!1,S())}function _(){n.value&&f.cancelRaf(n.value),z.value=!0}function S(){z.value||(n.value&&f.cancelRaf(n.value),n.value=f.rafTimeout(()=>{if(c.value=!0,l.effect==="slide"){const t=s.value%(r.value*v.value)+v.value;M(t),o.value=o.value%r.value+1}else w("left")},l.interval))}function A(){if(!c.value)if(c.value=!0,n.value&&f.cancelRaf(n.value),l.effect==="slide"){const t=(o.value+r.value-2)%r.value*v.value;I(t),o.value=o.value-1>0?o.value-1:r.value}else w("right")}function F(){if(!c.value)if(c.value=!0,n.value&&f.cancelRaf(n.value),l.effect==="slide"){const t=o.value*v.value;M(t),o.value=o.value%r.value+1}else w("left")}const $=e.ref(0),h=e.ref(0),b=e.ref(0),V=ie.useTransition($,{duration:l.slideDuration,transition:l.slideFunction});function w(t,u){t==="left"?o.value=o.value%r.value+1:t==="right"?o.value=o.value-1>0?o.value-1:r.value:o.value=u,f.rafTimeout(()=>{c.value=!1,l.autoplay&&S()},l.fadeDuration)}function q(t){E.value=t,$.value=$.value?0:1,h.value=s.value,b.value=t-h.value}function D(){$.value?s.value=h.value+b.value*V.value:s.value=h.value+b.value*(1-V.value)}function T(){s.value>=E.value?(c.value=!1,l.autoplay&&S()):(D(),d.value=requestAnimationFrame(T))}function M(t){s.value===r.value*v.value&&(s.value=0),q(t),d.value=requestAnimationFrame(T)}function O(){s.value<=E.value?(c.value=!1,l.autoplay&&S()):(D(),d.value=requestAnimationFrame(O))}function I(t){s.value===0&&(s.value=r.value*v.value),q(t),d.value=requestAnimationFrame(O)}function R(t){if(!c.value&&o.value!==t){if(c.value=!0,n.value&&f.cancelRaf(n.value),t<o.value)if(l.effect==="slide"){const u=(t-1)*v.value;I(u),o.value=t}else w("switch",t);if(t>o.value)if(l.effect==="slide"){const u=(t-1)*v.value;M(u),o.value=t}else w("switch",t)}}function ee(t){R(t)}function K(t){N("click",t)}function te(t){t>=1&&t<=r.value&&R(t)}function le(){A()}function ae(){F()}function oe(){return o.value}return W({to:te,prev:le,next:ae,getCurrentIndex:oe}),(t,u)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"carouselRef",ref:k,class:e.normalizeClass(["carousel-wrap",{"carousel-vertical":B.value,"carousel-fade":a.effect==="fade"}]),style:e.normalizeStyle(`
      --carousel-width: ${X.value};
      --carousel-height: ${Y.value};
      --carousel-arrow-color: ${a.arrowColor};
      --carousel-dot-size: ${a.dotSize}px;
      --carousel-dot-color: ${a.dotColor};
      --carousel-fade-duration: ${l.fadeDuration}ms;
      --carousel-fade-function: ${l.fadeFunction};
    `),onMouseenter:u[2]||(u[2]=i=>a.autoplay&&a.pauseOnMouseEnter?_():()=>!1),onMouseleave:u[3]||(u[3]=i=>a.autoplay&&a.pauseOnMouseEnter?p():()=>!1)},[e.createElementVNode("div",{class:"carousel-flex-wrap",style:e.normalizeStyle(J.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.images,(i,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["image-wrap",{"image-fade-active":a.effect==="fade"&&o.value===m+1}]),onClick:ue=>K(i),key:m},[e.createVNode(e.unref(H.default),e.mergeProps({spinning:!g.value[m],indicator:"dynamic-circle"},{ref_for:!0},a.spinProps),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":i.link}]),href:i.link,target:i.target?i.target:"_blank"},[(e.openBlock(),e.createElementBlock("img",{onLoad:ue=>P(m),src:i.src,key:i.src,alt:i.name,class:"image-item",style:e.normalizeStyle(`width: ${y.value}px; height: ${C.value}px;`)},null,44,se))],10,re)]),_:2},1040,["spinning"])],10,ne))),128)),r.value&&a.effect==="slide"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"image-wrap",onClick:u[1]||(u[1]=i=>K(a.images[0]))},[e.createVNode(e.unref(H.default),e.mergeProps({spinning:!g.value[0],indicator:"dynamic-circle"},a.spinProps),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":a.images[0].link}]),href:a.images[0].link,target:a.images[0].target?a.images[0].target:"_blank"},[(e.openBlock(),e.createElementBlock("img",{onLoad:u[0]||(u[0]=i=>P(0)),src:a.images[0].src,key:a.images[0].src,alt:a.images[0].name,class:"image-item",style:e.normalizeStyle(`width: ${y.value}px; height: ${C.value}px;`)},null,44,fe))],10,ce)]),_:1},16,["spinning"])])):e.createCommentVNode("",!0)],4),a.showArrow?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[(e.openBlock(),e.createElementBlock("svg",{tabindex:"0",class:"arrow-left",style:e.normalizeStyle(`width: ${a.arrowSize}px; height: ${a.arrowSize}px;`),onClick:A,onKeydown:e.withModifiers(x,["prevent"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},[...u[4]||(u[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: ${a.arrowSize}px; height: ${a.arrowSize}px;`),onClick:F,onKeydown:e.withModifiers(x,["prevent"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},[...u[5]||(u[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),a.dots?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["carousel-switch",`switch-${a.dotPosition}`])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,i=>(e.openBlock(),e.createElementBlock("div",{tabindex:"0",class:"dot-item",style:e.normalizeStyle([a.dotStyle,o.value===i?{backgroundColor:G.value,...a.dotActiveStyle}:{}]),key:i,onClick:m=>a.dotsTrigger==="click"?R(i):()=>!1,onMouseenter:m=>a.dotsTrigger==="hover"?ee(i):()=>!1,onKeydown:e.withModifiers(x,["prevent"])},null,44,ve))),128))],2)):e.createCommentVNode("",!0)],38))}});exports.default=de;