@farris/ui-vue/components/carousel/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(v,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("../common/index.umd.js"),require("vue")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue"],S):(v=typeof globalThis<"u"?globalThis:v||self,S(v.carousel={},v.common,v.Vue))})(this,function(v,S,l){"use strict";const k={initialIndex:{type:Number,default:0},height:{type:String,default:"400px"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},loop:{type:Boolean,default:!0},direction:{type:String,default:"horizontal",validator:e=>["horizontal","vertical"].includes(e)},arrow:{type:String,default:"hover",validator:e=>["always","hover","never"].includes(e)},indicatorPosition:{type:String,default:"inside",validator:e=>["inside","outside","none"].includes(e)},trigger:{type:String,default:"click",validator:e=>["click","hover"].includes(e)},pauseOnHover:{type:Boolean,default:!0},type:{type:String,default:"",validator:e=>["card",""].includes(e)},showTitle:{type:Boolean,default:!1},titleAlign:{type:String,default:"left",validator:e=>["left","center","right"].includes(e)}};function E(e,{emit:w,slots:s},a,d,y,c){const f=n=>e.loop?n-1:n,A=()=>{if(!e.loop)return;let n=!1,h=a.value;a.value===0?(h=d.value,n=!0):a.value===y.value-1&&(h=1,n=!0),n&&(c.value=!1,a.value=h)},m=(n,h=!1)=>{if(c.value&&!h)return;let i;if(typeof n=="string"){if(!s.default||(i=s.default().findIndex(I=>{var N;return((N=I.props)==null?void 0:N.name)===n}),i===-1))return;e.loop&&(i+=1)}else i=n;if(i<0||i>=y.value){if(!e.loop)return;i<0?i=y.value-2:i=1}if(i===a.value&&!h)return;const x=f(a.value);a.value=i,c.value=!h,h||setTimeout(()=>{c.value=!1,A()},500),w("change",f(i),x)};return{setActiveItem:m,next:()=>{if(d.value<=1)return;let n=a.value+1;if(n>=y.value){if(!e.loop)return;n=y.value-1}m(n)},prev:()=>{if(d.value<=1)return;let n=a.value-1;if(n<0){if(!e.loop)return;n=0}m(n)},handleIndicatorEvent:n=>{e.trigger==="hover"&&m(n)},handleIndicatorClick:n=>{e.trigger==="click"&&m(n)},getRealIndex:f}}function T(e,w,s){let a=null;const d=()=>{a&&(clearInterval(a),a=null)},y=()=>{e.autoplay&&(d(),a=setInterval(()=>{(!w.value||!e.pauseOnHover)&&s()},e.interval))};return{startAutoPlay:y,stopAutoPlay:d,handleMouseEnter:()=>{w.value=!0,e.pauseOnHover&&d()},handleMouseLeave:()=>{w.value=!1,e.autoplay&&y()}}}const M=l.defineComponent({name:"Carousel",props:k,emits:["change"],setup(e,{emit:w,slots:s}){const a=l.ref(!1),d=l.ref(!1),y=l.ref(null),c=l.computed(()=>{if(!s.default)return 0;const t=s.default();return!t||t.length===0?0:t.length===1&&t[0].children&&Array.isArray(t[0].children)?t[0].children.length:t.length}),f=l.ref(e.loop?Math.min(e.initialIndex+1,c.value):e.initialIndex),A=l.computed(()=>e.loop?c.value+2:c.value),{next:m,prev:P,setActiveItem:b,handleIndicatorEvent:$,handleIndicatorClick:C,getRealIndex:n}=E(e,{emit:w,slots:s},f,c,A,a),{startAutoPlay:h,stopAutoPlay:i,handleMouseEnter:x,handleMouseLeave:z}=T(e,d,m),I=l.computed(()=>-(f.value*100)/A.value),N=l.computed(()=>({overflow:"hidden",position:"relative",height:e.height,width:"100%"})),O=l.computed(()=>{const t=e.direction==="horizontal";return{display:"flex",height:t?"100%":`${A.value*100}%`,width:t?`${A.value*100}%`:"100%",flexDirection:t?"row":"column",transition:a.value?"transform 0.5s ease-in-out":"none",transform:t?`translateX(${I.value}%)`:`translateY(${I.value}%)`}}),V=t=>{const u=t===f.value,o=e.direction==="horizontal",r=100/A.value;return{flex:`0 0 ${r}%`,width:"100%",height:"100%",minWidth:o?`${r}%`:"100%",minHeight:o?"100%":`${r}%`,position:"relative",overflow:"hidden",opacity:e.type==="card"?u?1:.5:1,transform:e.type==="card"?u?"scale(1)":"scale(0.8)":"scale(1)",transition:"all 0.5s ease-in-out",cursor:e.type==="card"?"pointer":"default"}},_=l.computed(()=>e.arrow==="never"?!1:e.arrow==="always"?!0:d.value),j=l.computed(()=>e.indicatorPosition!=="none"&&c.value>1);l.watch(()=>e.autoplay,t=>{t&&!d.value?h():i()}),l.watch(()=>e.interval,()=>{e.autoplay&&!d.value&&h()}),l.onMounted(()=>{e.autoplay&&h()}),l.onUnmounted(()=>{i()});const B=()=>{if(!_.value||c.value<=1)return null;const t=o=>({position:"absolute",[e.direction==="horizontal"?o==="prev"?"left":"right":o==="prev"?"top":"bottom"]:"16px",[e.direction==="horizontal"?"top":"left"]:"50%",transform:e.direction==="horizontal"?"translateY(-50%)":"translateX(-50%)"}),u=e.direction==="horizontal"?"horizontal":"vertical";return l.createVNode(l.Fragment,null,[l.createVNode("button",{class:`carousel-arrow carousel-arrow-prev ${u}`,onClick:P,type:"button",style:t("prev")},[l.createVNode("span",{class:"icon"},[l.createTextVNode("‹")])]),l.createVNode("button",{class:`carousel-arrow carousel-arrow-next ${u}`,onClick:m,type:"button",style:t("next")},[l.createVNode("span",{class:"icon"},[l.createTextVNode("›")])])])},p=()=>{if(!j.value)return null;const t=e.indicatorPosition==="outside",u=c.value;return l.createVNode("div",{class:`carousel-indicators ${t?"outside":""}`},[Array.from({length:u}).map((o,r)=>{const g=e.loop?r+1:r,L=f.value===g;return l.createVNode("button",{key:r,type:"button",class:`carousel-indicator ${L?"active":""}`,onMouseenter:()=>$(g),onClick:()=>C(g),"aria-label":`Go to slide ${r+1}`},null)})])},F=()=>{if(!e.showTitle||!s.default)return null;let t=s.default();if(!t||t.length===0)return null;t.length===1&&t[0].children&&Array.isArray(t[0].children)&&(t=t[0].children);const u=n(f.value),o=t[u];if(!o||!o.props)return null;const{label:r}=o.props;if(!r)return null;const g={left:"left",center:"center",right:"right"};return l.createVNode("div",{class:"carousel-title-area",style:{textAlign:g[e.titleAlign]}},[l.createVNode("h3",null,[r])])},R=()=>{if(!s.default)return null;let t=s.default();if(!t||t.length===0)return null;t.length===1&&t[0].children&&Array.isArray(t[0].children)&&(t=t[0].children);const u=[];if(e.loop&&t.length>1){const o=t[t.length-1];u.push(l.createVNode("div",{key:"clone-last",class:"carousel-item",style:V(0)},[o]))}if(t.forEach((o,r)=>{const g=e.loop?r+1:r;u.push(l.createVNode("div",{key:r,class:`carousel-item ${g===f.value?"active":""}`,style:V(g),onClick:()=>{e.type==="card"&&g!==f.value&&b(g)}},[o]))}),e.loop&&t.length>1){const o=t[0],r=t.length+1;u.push(l.createVNode("div",{key:"clone-first",class:"carousel-item",style:V(r)},[o]))}return u};return()=>l.createVNode("div",{ref:y,class:"el-carousel",style:N.value,onMouseenter:x,onMouseleave:z},[l.createVNode("div",{class:"el-carousel__track",style:O.value},[R()]),B(),e.indicatorPosition==="inside"&&p(),e.indicatorPosition==="outside"&&p(),F()])}}),H=S.withInstall(M);v.FCarouselComponent=M,v.carouselProps=k,v.default=H,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});