vexip-ui/lib/components/carousel/carousel.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../icon/index.cjs");require("../renderer/index.cjs");require("../resize-observer/index.cjs");const m=require("@vexip-ui/config"),_=require("@vexip-ui/hooks"),H=require("@vexip-ui/utils"),de=require("./props.cjs"),he=require("./symbol.cjs"),me=require("../resize-observer/resize-observer.cjs"),$=require("../renderer/renderer.cjs"),X=require("../icon/icon.cjs"),pe=["onClick"],we=e.defineComponent({name:"Carousel",__name:"carousel",props:de.carouselProps,emits:["update:active"],setup(Y,{expose:Z,emit:j}){const G=Y,t=m.useProps("carousel",G,{active:{default:0,static:!0},viewSize:{default:3,validator:r=>r>0},vertical:!1,disabled:!1,loop:!1,arrow:{default:"outside",validator:r=>["outside","inside","none"].includes(r)},arrowTrigger:{default:"hover",validator:r=>["hover","always"].includes(r)},autoplay:{default:!1,validator:r=>typeof r=="number"?r>500:!0},pointer:{default:"none",validator:r=>["outside","inside","none"].includes(r)},speed:300,activeOffset:0,height:null,ignoreHover:!1,slots:()=>({})}),J=j,n=m.useNameHelper("carousel"),w=m.useIcons(),P=m.useHoverDelay(),{isRtl:N}=_.useRtl(),o=e.ref(new Set),a=e.ref(0),g=e.ref(!1),C=e.ref(t.arrowTrigger==="always"),c=e.reactive({width:0,height:0}),u=e.reactive({width:0,height:0,offset:0}),v=e.reactive({width:0,height:0}),{wrapper:S,isHover:K}=_.useHover(),b=e.ref(),z=e.ref(),y=e.computed(()=>t.disabled||o.value.size<=t.viewSize),Q=e.computed(()=>({[n.b()]:!0,[n.bs("vars")]:!0,[n.bm("inherit")]:t.inherit,[n.bm("vertical")]:t.vertical,[n.bm("disabled")]:y.value})),ee=e.computed(()=>({height:t.vertical&&t.height?`${t.height}${typeof t.height=="number"?"px":""}`:void 0})),te=e.computed(()=>({width:c.width?`${c.width}px`:void 0,height:c.height?`${c.height}px`:void 0})),re=e.computed(()=>({width:u.width?`${u.width}px`:void 0,height:u.height?`${u.height}px`:void 0,transform:u.offset?`translate${t.vertical?"Y":"X"}(${N.value&&!t.vertical?`${-u.offset}`:u.offset}px) translateZ(0)`:void 0,transitionDuration:g.value?"0ms":`${t.speed}ms`})),q=e.computed(()=>y.value||!t.loop&&a.value<=0),x=e.computed(()=>y.value||!t.loop&&a.value>=o.value.size-t.viewSize),A=e.computed(()=>t.vertical?[w.value.angleUp,w.value.angleDown]:N.value?[w.value.angleRight,w.value.angleLeft]:[w.value.angleLeft,w.value.angleRight]);e.watch(()=>t.active,r=>{O(r-t.activeOffset)}),e.watch(K,r=>{t.ignoreHover||(r?ue():fe())}),e.watch(()=>t.viewSize,I),e.watch(()=>t.autoplay,B);const M=H.debounceMinor(()=>{Array.from(o.value).forEach((r,l)=>{r.label=l})}),D=H.debounceMinor(()=>{o.value.forEach(r=>{r.width=v.width,r.height=v.height})}),R=H.debounceMinor(()=>{u.width=v.width*o.value.size,u.height=v.height*o.value.size});e.provide(he.CAROUSEL_STATE,e.reactive({vertical:e.toRef(t,"vertical"),increaseItem:ae,decreaseItem:le,isItemActive:ie,handleSelect:se}));let h=!1,V=!1;g.value=!0,e.onMounted(()=>{F(),O(t.active-t.activeOffset),U(),setTimeout(()=>{g.value=!1,h=!1,B()},0)}),Z({itemStates:o,currentActive:a,arrowActive:C,wrapper:S,prev:b,next:z,refresh:I});function ae(r){o.value.add(r),M(),D(),R()}function le(r){o.value.delete(r),M(),R()}function ie(r){return(a.value+t.activeOffset)%o.value.size===r}function F(){if(!S.value)return;let r=0,l=0;t.arrow==="outside"&&(t.vertical?(r=b.value?b.value.offsetHeight:0,l=z.value?z.value.offsetHeight:0):(r=b.value?b.value.offsetWidth:0,l=z.value?z.value.offsetWidth:0)),t.vertical?(c.width=0,c.height=S.value.offsetHeight-r-l,v.width=0,v.height=c.height/t.viewSize):(c.width=S.value.offsetWidth-r-l,c.height=0,v.width=c.width/t.viewSize,v.height=0)}function I(){F(),D(),R(),u.offset>0?E(0):k(0),setTimeout(()=>{g.value=!1,h=!1},0)}function W(){const r=(a.value+t.activeOffset)%o.value.size;J("update:active",r),m.emitEvent(t.onChange,r)}function E(r=1){if(y.value||h)return;const l=t.vertical?v.height:v.width,s=Array.from(o.value),i=s.length,f=(a.value-r+i)%i,L=a.value;if(f>=i-t.viewSize){if(!t.loop)return;if(u.offset<0)if(r<a.value)u.offset=-f*l;else{u.offset=l*(i-f);for(let d=f;d<i;++d)s[d].offset=-i*l}else{for(let d=0;d<i;++d)s[d].offset=d<f?0:(N.value&&!t.vertical?i:-i)*l;u.offset=l*(i-f)}a.value=f}else a.value=f,u.offset=-a.value*l;V=a.value<=i-t.viewSize,h=!0,a.value!==L&&W()}function k(r=1){if(y.value||h)return;const l=t.vertical?v.height:v.width,s=Array.from(o.value),i=s.length,f=a.value+r,L=a.value;if(f>o.value.size-t.viewSize){if(!t.loop)return;if(u.offset>0)u.offset=l*(i-f);else{const d=f+t.viewSize-i;for(let T=0,ce=s.length;T<ce;++T)s[T].offset=T<d?(N.value&&!t.vertical?-i:i)*l:0;u.offset=-f*l}a.value=f%i}else a.value=f,u.offset=-a.value*l;V=a.value<=i-t.viewSize,h=!0,a.value!==L&&W()}function O(r){if(y.value||h||r===a.value)return;const l=o.value.size;if(r=r%l+(r<0?l:0),t.loop){let s,i;r>a.value?(s=r-a.value,i=l-r+a.value):(s=l-a.value+r,i=a.value-r),s<i?k(s):s>i?E(i):u.offset>0?E(s):k(s)}else r<a.value?E(a.value-r):k(r-a.value)}function U(){V?(o.value.forEach(r=>{r.offset=0}),V=!1,g.value=!0,requestAnimationFrame(()=>{u.offset=-a.value*(t.vertical?v.height:v.width),requestAnimationFrame(()=>{g.value=!1,h=!1})})):h=!1}function oe(){E(1),m.emitEvent(t.onPrev,(a.value+t.activeOffset)%o.value.size)}function ne(){k(1),m.emitEvent(t.onNext,(a.value+t.activeOffset)%o.value.size)}function se(r){m.emitEvent(t.onSelect,r)}const{timer:p}=_.useSetTimeout();function B(){if(clearInterval(p.play),!t.autoplay)return;let r=4e3;typeof t.autoplay=="number"&&(r=t.autoplay),p.play=window.setInterval(()=>{!t.loop&&x.value?O(0):k()},r)}function ue(){t.autoplay&&(clearTimeout(p.hover),p.hover=setTimeout(()=>{clearInterval(p.play)},P.value)),t.arrowTrigger==="hover"&&t.arrow==="inside"&&(C.value=!0)}function fe(){t.autoplay&&(clearTimeout(p.hover),p.hover=setTimeout(()=>{B()},P.value)),t.arrowTrigger==="hover"&&(C.value=!1)}function ve(r){return t.loop?!1:!(r>=t.activeOffset-1&&r<o.value.size-t.activeOffset-1)}return(r,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:S,class:e.normalizeClass(Q.value),role:"list",style:e.normalizeStyle(ee.value)},[e.createVNode(e.unref(me),{onResize:I},{default:e.withCtx(()=>[e.createElementVNode("div",{style:e.normalizeStyle({position:"relative",display:"flex",flexDirection:e.unref(t).vertical?"column":"row",width:"100%"})},[e.unref(t).arrow!=="none"?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"prev",ref:b,class:e.normalizeClass([e.unref(n).bem("arrow",e.unref(t).arrow),e.unref(n).bem("arrow","prev"),C.value?e.unref(n).bem("arrow","show"):""])},[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(n).be("handler")]:!0,[e.unref(n).bem("handler","disabled")]:q.value}),onClick:oe},[e.renderSlot(r.$slots,"prevArrow",{disabled:q.value},()=>[e.createVNode(e.unref($),{renderer:e.unref(t).slots.prevArrow,data:{disabled:q.value}},{default:e.withCtx(()=>[e.createVNode(e.unref(X),e.mergeProps(A.value[0],{scale:+(A.value[0].scale||1)*1.5}),null,16,["scale"])]),_:1},8,["renderer","data"])])],2)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("list")),style:e.normalizeStyle(te.value)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(n).be("track")),style:e.normalizeStyle(re.value),onTransitionend:e.withModifiers(U,["self"])},[e.renderSlot(r.$slots,"default",{},()=>[e.createVNode(e.unref($),{renderer:e.unref(t).slots.default},null,8,["renderer"]),l[0]||(l[0]=e.createTextVNode("> "))])],38)],6),e.unref(t).arrow!=="none"?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"next",ref:z,class:e.normalizeClass([e.unref(n).bem("arrow",e.unref(t).arrow),e.unref(n).bem("arrow","next"),C.value?e.unref(n).bem("arrow","show"):""])},[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(n).be("handler")]:!0,[e.unref(n).bem("handler","disabled")]:x.value}),onClick:ne},[e.renderSlot(r.$slots,"nextArrow",{disabled:x.value},()=>[e.createVNode(e.unref($),{renderer:e.unref(t).slots.nextArrow,data:{disabled:x.value}},{default:e.withCtx(()=>[e.createVNode(e.unref(X),e.mergeProps(A.value[1],{scale:+(A.value[1].scale||1)*1.5}),null,16,["scale"])]),_:1},8,["renderer","data"])])],2)],2)):e.createCommentVNode("",!0)],4)]),_:3}),e.unref(t).pointer!=="none"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n).bem("pointers",e.unref(t).pointer))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value.size,s=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass({[e.unref(n).be("pointer")]:!0,[e.unref(n).bem("pointer","active")]:s-1===(a.value+e.unref(t).activeOffset)%o.value.size,[e.unref(n).bem("pointer","disabled")]:ve(s-e.unref(t).activeOffset-1)}),onClick:i=>O(s-e.unref(t).activeOffset-1)},[e.renderSlot(r.$slots,"pointer",{active:s-1===(a.value+e.unref(t).activeOffset)%o.value.size},()=>[e.createVNode(e.unref($),{renderer:e.unref(t).slots.pointer,data:{active:s-1===(a.value+e.unref(t).activeOffset)%o.value.size}},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).be("pointer-inner"))},null,2)]),_:2},1032,["renderer","data"])])],10,pe))),128))],2)):e.createCommentVNode("",!0)],6))}});module.exports=we;
//# sourceMappingURL=carousel.vue2.cjs.map